Dragon Fruit Horizon palette

Colors in Dragon Fruit Horizon: HEX, RGB, HSL & OKLCH

• bg

  #FFE7DF

  #FFE7DF color page →

  RGB

  rgb(255 231 223)

  HSL

  hsl(15 100% 94%)

  OKLCH

  oklch(0.945 0.029 39.3)

  WCAG contrast: on white 1.18:1 (Fail) · on black 17.74:1 (AAA)

• surface

  #FA9092

  #FA9092 color page →

  RGB

  rgb(250 144 146)

  HSL

  hsl(359 91% 77%)

  OKLCH

  oklch(0.766 0.128 19.3)

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

• primary

  #D3586D

  #D3586D color page →

  RGB

  rgb(211 88 109)

  HSL

  hsl(350 58% 59%)

  OKLCH

  oklch(0.623 0.156 12.4)

  WCAG contrast: on white 3.89:1 (Fail) · on black 5.38:1 (AA)

• accent

  #7E2B64

  #7E2B64 color page →

  RGB

  rgb(126 43 100)

  HSL

  hsl(319 49% 33%)

  OKLCH

  oklch(0.431 0.133 342.1)

  WCAG contrast: on white 8.68:1 (AAA) · on black 2.41:1 (Fail)

• text

  #0E0E25

  #0E0E25 color page →

  RGB

  rgb(14 14 37)

  HSL

  hsl(240 45% 10%)

  OKLCH

  oklch(0.179 0.046 280.6)

  WCAG contrast: on white 18.94:1 (AAA) · on black 1.10:1 (Fail)

Export Dragon Fruit Horizon: CSS variables, Tailwind & JSON

:root {
  --bg: #ffe7df;
  --surface: #fa9092;
  --primary: #d3586d;
  --accent: #7e2b64;
  --text: #0e0e25;
}

@theme {
  --color-bg: #ffe7df;
  --color-surface: #fa9092;
  --color-primary: #d3586d;
  --color-accent: #7e2b64;
  --color-text: #0e0e25;
}

{
  "dragon-fruit-horizon-4ev": {
    "bg": {
      "$type": "color",
      "$value": "#ffe7df"
    },
    "surface": {
      "$type": "color",
      "$value": "#fa9092"
    },
    "primary": {
      "$type": "color",
      "$value": "#d3586d"
    },
    "accent": {
      "$type": "color",
      "$value": "#7e2b64"
    },
    "text": {
      "$type": "color",
      "$value": "#0e0e25"
    }
  }
}