Steady Jade Jewel Bloom palette

Colors in Steady Jade Jewel Bloom: HEX, RGB, HSL & OKLCH

• bg

  #DAF1F1

  #DAF1F1 color page →

  RGB

  rgb(218 241 241)

  HSL

  hsl(180 45% 90%)

  OKLCH

  oklch(0.941 0.024 196.7)

  WCAG contrast: on white 1.17:1 (Fail) · on black 17.83:1 (AAA)

• surface

  #307C7A

  #307C7A color page →

  RGB

  rgb(48 124 122)

  HSL

  hsl(178 44% 34%)

  OKLCH

  oklch(0.539 0.074 192.8)

  WCAG contrast: on white 4.89:1 (AA) · on black 4.28:1 (Fail)

• primary

  #835357

  #835357 color page →

  RGB

  rgb(131 83 87)

  HSL

  hsl(355 22% 42%)

  OKLCH

  oklch(0.497 0.064 14.2)

  WCAG contrast: on white 6.28:1 (AA) · on black 3.33:1 (Fail)

• accent

  #5C5E3E

  #5C5E3E color page →

  RGB

  rgb(92 94 62)

  HSL

  hsl(64 21% 31%)

  OKLCH

  oklch(0.471 0.048 111.1)

  WCAG contrast: on white 6.71:1 (AA) · on black 3.12:1 (Fail)

• text

  #020A0A

  #020A0A color page →

  RGB

  rgb(2 10 10)

  HSL

  hsl(180 67% 2%)

  OKLCH

  oklch(0.134 0.017 195.3)

  WCAG contrast: on white 19.99:1 (AAA) · on black 1.05:1 (Fail)

Export Steady Jade Jewel Bloom: CSS variables, Tailwind & JSON

:root {
  --bg: #daf1f1;
  --surface: #307c7a;
  --primary: #835357;
  --accent: #5c5e3e;
  --text: #020a0a;
}

@theme {
  --color-bg: #daf1f1;
  --color-surface: #307c7a;
  --color-primary: #835357;
  --color-accent: #5c5e3e;
  --color-text: #020a0a;
}

{
  "steady-jade-jewel-bloom-4p1": {
    "bg": {
      "$type": "color",
      "$value": "#daf1f1"
    },
    "surface": {
      "$type": "color",
      "$value": "#307c7a"
    },
    "primary": {
      "$type": "color",
      "$value": "#835357"
    },
    "accent": {
      "$type": "color",
      "$value": "#5c5e3e"
    },
    "text": {
      "$type": "color",
      "$value": "#020a0a"
    }
  }
}