Classic Fairy Tale Forge palette

Colors in Classic Fairy Tale Forge: HEX, RGB, HSL & OKLCH

• bg

  #FFF4F3

  #FFF4F3 color page →

  RGB

  rgb(255 244 243)

  HSL

  hsl(5 100% 98%)

  OKLCH

  oklch(0.975 0.012 23.7)

  WCAG contrast: on white 1.07:1 (Fail) · on black 19.48:1 (AAA)

• surface

  #F8CDCE

  #F8CDCE color page →

  RGB

  rgb(248 205 206)

  HSL

  hsl(359 75% 89%)

  OKLCH

  oklch(0.886 0.049 16.5)

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

• primary

  #EDBDA6

  #EDBDA6 color page →

  RGB

  rgb(237 189 166)

  HSL

  hsl(19 66% 79%)

  OKLCH

  oklch(0.835 0.064 46.9)

  WCAG contrast: on white 1.68:1 (Fail) · on black 12.43:1 (AAA)

• accent

  #EBB1C6

  #EBB1C6 color page →

  RGB

  rgb(235 177 198)

  HSL

  hsl(338 59% 81%)

  OKLCH

  oklch(0.82 0.072 355.3)

  WCAG contrast: on white 1.80:1 (Fail) · on black 11.63:1 (AAA)

• text

  #432927

  #432927 color page →

  RGB

  rgb(67 41 39)

  HSL

  hsl(4 26% 21%)

  OKLCH

  oklch(0.313 0.039 24.4)

  WCAG contrast: on white 13.24:1 (AAA) · on black 1.58:1 (Fail)

Export Classic Fairy Tale Forge: CSS variables, Tailwind & JSON

:root {
  --bg: #fff4f3;
  --surface: #f8cdce;
  --primary: #edbda6;
  --accent: #ebb1c6;
  --text: #432927;
}

@theme {
  --color-bg: #fff4f3;
  --color-surface: #f8cdce;
  --color-primary: #edbda6;
  --color-accent: #ebb1c6;
  --color-text: #432927;
}

{
  "classic-fairy-tale-forge-615": {
    "bg": {
      "$type": "color",
      "$value": "#fff4f3"
    },
    "surface": {
      "$type": "color",
      "$value": "#f8cdce"
    },
    "primary": {
      "$type": "color",
      "$value": "#edbda6"
    },
    "accent": {
      "$type": "color",
      "$value": "#ebb1c6"
    },
    "text": {
      "$type": "color",
      "$value": "#432927"
    }
  }
}