Citrus Brief palette

Colors in Citrus Brief: HEX, RGB, HSL & OKLCH

• bg

  #FFFBEB

  #FFFBEB color page →

  RGB

  rgb(255 251 235)

  HSL

  hsl(48 100% 96%)

  OKLCH

  oklch(0.987 0.021 95.3)

  WCAG contrast: on white 1.03:1 (Fail) · on black 20.25:1 (AAA)

• lemon

  #FDE68A

  #FDE68A color page →

  RGB

  rgb(253 230 138)

  HSL

  hsl(48 97% 77%)

  OKLCH

  oklch(0.924 0.115 95.7)

  WCAG contrast: on white 1.24:1 (Fail) · on black 16.86:1 (AAA)

• orange

  #FB923C

  #FB923C color page →

  RGB

  rgb(251 146 60)

  HSL

  hsl(27 96% 61%)

  OKLCH

  oklch(0.758 0.159 55.9)

  WCAG contrast: on white 2.26:1 (Fail) · on black 9.27:1 (AAA)

• teal

  #14B8A6

  #14B8A6 color page →

  RGB

  rgb(20 184 166)

  HSL

  hsl(173 80% 40%)

  OKLCH

  oklch(0.704 0.123 182.5)

  WCAG contrast: on white 2.48:1 (Fail) · on black 8.43:1 (AAA)

• ink

  #1E293B

  #1E293B color page →

  RGB

  rgb(30 41 59)

  HSL

  hsl(217 33% 17%)

  OKLCH

  oklch(0.279 0.037 260)

  WCAG contrast: on white 14.62:1 (AAA) · on black 1.43:1 (Fail)

Export Citrus Brief: CSS variables, Tailwind & JSON

:root {
  --bg: #fffbeb;
  --lemon: #fde68a;
  --orange: #fb923c;
  --teal: #14b8a6;
  --ink: #1e293b;
}

@theme {
  --color-bg: #fffbeb;
  --color-lemon: #fde68a;
  --color-orange: #fb923c;
  --color-teal: #14b8a6;
  --color-ink: #1e293b;
}

{
  "citrus-brief": {
    "bg": {
      "$type": "color",
      "$value": "#fffbeb"
    },
    "lemon": {
      "$type": "color",
      "$value": "#fde68a"
    },
    "orange": {
      "$type": "color",
      "$value": "#fb923c"
    },
    "teal": {
      "$type": "color",
      "$value": "#14b8a6"
    },
    "ink": {
      "$type": "color",
      "$value": "#1e293b"
    }
  }
}