Sakura Dawn palette

Colors in Sakura Dawn: HEX, RGB, HSL & OKLCH

• bg

  #FFF7F5

  #FFF7F5 color page →

  RGB

  rgb(255 247 245)

  HSL

  hsl(12 100% 98%)

  OKLCH

  oklch(0.982 0.009 34.3)

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

• blush

  #FFD6E0

  #FFD6E0 color page →

  RGB

  rgb(255 214 224)

  HSL

  hsl(345 100% 92%)

  OKLCH

  oklch(0.914 0.047 1.7)

  WCAG contrast: on white 1.31:1 (Fail) · on black 15.94:1 (AAA)

• pink

  #F9A8D4

  #F9A8D4 color page →

  RGB

  rgb(249 168 212)

  HSL

  hsl(327 87% 82%)

  OKLCH

  oklch(0.823 0.11 346)

  WCAG contrast: on white 1.81:1 (Fail) · on black 11.57:1 (AAA)

• lilac

  #9F7AEA

  #9F7AEA color page →

  RGB

  rgb(159 122 234)

  HSL

  hsl(260 73% 70%)

  OKLCH

  oklch(0.664 0.163 297)

  WCAG contrast: on white 3.25:1 (Fail) · on black 6.44:1 (AA)

• ink

  #4A3F6B

  #4A3F6B color page →

  RGB

  rgb(74 63 107)

  HSL

  hsl(255 26% 33%)

  OKLCH

  oklch(0.399 0.074 294.3)

  WCAG contrast: on white 9.48:1 (AAA) · on black 2.21:1 (Fail)

Export Sakura Dawn: CSS variables, Tailwind & JSON

:root {
  --bg: #fff7f5;
  --blush: #ffd6e0;
  --pink: #f9a8d4;
  --lilac: #9f7aea;
  --ink: #4a3f6b;
}

@theme {
  --color-bg: #fff7f5;
  --color-blush: #ffd6e0;
  --color-pink: #f9a8d4;
  --color-lilac: #9f7aea;
  --color-ink: #4a3f6b;
}

{
  "sakura-dawn": {
    "bg": {
      "$type": "color",
      "$value": "#fff7f5"
    },
    "blush": {
      "$type": "color",
      "$value": "#ffd6e0"
    },
    "pink": {
      "$type": "color",
      "$value": "#f9a8d4"
    },
    "lilac": {
      "$type": "color",
      "$value": "#9f7aea"
    },
    "ink": {
      "$type": "color",
      "$value": "#4a3f6b"
    }
  }
}