Classic Dragon Fruit Forge palette

Colors in Classic Dragon Fruit Forge: HEX, RGB, HSL & OKLCH

• bg

  #FFDDD1

  #FFDDD1 color page →

  RGB

  rgb(255 221 209)

  HSL

  hsl(16 100% 91%)

  OKLCH

  oklch(0.923 0.041 40.4)

  WCAG contrast: on white 1.27:1 (Fail) · on black 16.51:1 (AAA)

• surface

  #FD9489

  #FD9489 color page →

  RGB

  rgb(253 148 137)

  HSL

  hsl(6 97% 76%)

  OKLCH

  oklch(0.774 0.128 26.8)

  WCAG contrast: on white 2.14:1 (Fail) · on black 9.77:1 (AAA)

• primary

  #CE5B68

  #CE5B68 color page →

  RGB

  rgb(206 91 104)

  HSL

  hsl(353 54% 58%)

  OKLCH

  oklch(0.618 0.146 15.5)

  WCAG contrast: on white 3.94:1 (Fail) · on black 5.32:1 (AA)

• accent

  #882F57

  #882F57 color page →

  RGB

  rgb(136 47 87)

  HSL

  hsl(333 49% 36%)

  OKLCH

  oklch(0.447 0.128 355.7)

  WCAG contrast: on white 8.10:1 (AAA) · on black 2.59:1 (Fail)

• text

  #151228

  #151228 color page →

  RGB

  rgb(21 18 40)

  HSL

  hsl(248 38% 11%)

  OKLCH

  oklch(0.199 0.043 288.1)

  WCAG contrast: on white 18.27:1 (AAA) · on black 1.14:1 (Fail)

Export Classic Dragon Fruit Forge: CSS variables, Tailwind & JSON

:root {
  --bg: #ffddd1;
  --surface: #fd9489;
  --primary: #ce5b68;
  --accent: #882f57;
  --text: #151228;
}

@theme {
  --color-bg: #ffddd1;
  --color-surface: #fd9489;
  --color-primary: #ce5b68;
  --color-accent: #882f57;
  --color-text: #151228;
}

{
  "classic-dragon-fruit-forge-50o": {
    "bg": {
      "$type": "color",
      "$value": "#ffddd1"
    },
    "surface": {
      "$type": "color",
      "$value": "#fd9489"
    },
    "primary": {
      "$type": "color",
      "$value": "#ce5b68"
    },
    "accent": {
      "$type": "color",
      "$value": "#882f57"
    },
    "text": {
      "$type": "color",
      "$value": "#151228"
    }
  }
}