Cyber Orchid palette

Colors in Cyber Orchid: HEX, RGB, HSL & OKLCH

• bg

  #12061F

  #12061F color page →

  RGB

  rgb(18 6 31)

  HSL

  hsl(269 68% 7%)

  OKLCH

  oklch(0.159 0.053 303.6)

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

• orchid

  #7C3AED

  #7C3AED color page →

  RGB

  rgb(124 58 237)

  HSL

  hsl(262 83% 58%)

  OKLCH

  oklch(0.541 0.247 293)

  WCAG contrast: on white 5.69:1 (AA) · on black 3.68:1 (Fail)

• pink

  #EC4899

  #EC4899 color page →

  RGB

  rgb(236 72 153)

  HSL

  hsl(330 81% 60%)

  OKLCH

  oklch(0.656 0.212 354.3)

  WCAG contrast: on white 3.52:1 (Fail) · on black 5.95:1 (AA)

• ice

  #06B6D4

  #06B6D4 color page →

  RGB

  rgb(6 182 212)

  HSL

  hsl(189 94% 43%)

  OKLCH

  oklch(0.715 0.126 215.2)

  WCAG contrast: on white 2.42:1 (Fail) · on black 8.64:1 (AAA)

• text

  #F5F3FF

  #F5F3FF color page →

  RGB

  rgb(245 243 255)

  HSL

  hsl(250 100% 98%)

  OKLCH

  oklch(0.969 0.016 293.8)

  WCAG contrast: on white 1.09:1 (Fail) · on black 19.14:1 (AAA)

Export Cyber Orchid: CSS variables, Tailwind & JSON

:root {
  --bg: #12061f;
  --orchid: #7c3aed;
  --pink: #ec4899;
  --ice: #06b6d4;
  --text: #f5f3ff;
}

@theme {
  --color-bg: #12061f;
  --color-orchid: #7c3aed;
  --color-pink: #ec4899;
  --color-ice: #06b6d4;
  --color-text: #f5f3ff;
}

{
  "cyber-orchid": {
    "bg": {
      "$type": "color",
      "$value": "#12061f"
    },
    "orchid": {
      "$type": "color",
      "$value": "#7c3aed"
    },
    "pink": {
      "$type": "color",
      "$value": "#ec4899"
    },
    "ice": {
      "$type": "color",
      "$value": "#06b6d4"
    },
    "text": {
      "$type": "color",
      "$value": "#f5f3ff"
    }
  }
}