Cyan Info
Info & CyanCrisp cyan info scale engineered for notification banners, informational tooltips, and live data telemetry.
About the Cyan Info palette
Crisp cyan info scale engineered for notification banners, informational tooltips, and live data telemetry. The scale is anchored at hue 215 in OKLCH, so every step keeps the same hue while lightness moves in perceptually even steps from 50 to 950. The 500 step (#0a7c90) is your base color. Shades 500-950 pass WCAG 2.1 AA against white and shades 50, 100, 200, 300, 400 pass against black, so use the light end for backgrounds and the dark end for text on light surfaces (or vice versa). Each value is copy-ready as oklch(), HEX, RGB or HSL.
11 colors · click a card to copy
cart writes to --color-cyan-info-*
Shade Step Breakdown (50 to 950)
| Swatch | Shade Step | OKLCH CSS Value | sRGB Fallback | RGB | HSL | WCAG on Black | WCAG on White | Gamut |
|---|---|---|---|---|---|---|---|---|
| 50 | oklch(97.0% 0.023 215.0) | #e5f9ff | rgb(229, 249, 255) | hsl(192.35, 98.63%, 94.84%) | 19.33:1 | 1.09:1 | sRGB | |
| 100 | oklch(93.0% 0.054 215.0) | #c0f2ff | rgb(192, 242, 255) | hsl(192.18, 98.51%, 87.52%) | 17.39:1 | 1.21:1 | sRGB | |
| 200 | oklch(86.0% 0.110 215.0) | #71e3fe | rgb(113, 227, 254) | hsl(191.27, 98.73%, 71.88%) | 14.12:1 | 1.49:1 | sRGB | |
| 300 | oklch(76.0% 0.132 215.0) | #16c5e5 | rgb(22, 197, 229) | hsl(189.13, 82.52%, 49.19%) | 10.15:1 | 2.07:1 | sRGB | |
| 400 | oklch(68.0% 0.160 215.0) | #00aac6 | rgb(0, 170, 198) | hsl(188.48, 99.92%, 38.89%) | 7.57:1 | 2.78:1 | sRGB | |
| 500 | oklch(54.0% 0.093 215.0) | #0a7c90 | rgb(9, 124, 144) | hsl(189.14, 87.71%, 30.18%) | 4.3:1 | 4.89:1 | sRGB | |
| 600 | oklch(45.0% 0.078 215.0) | #066070 | rgb(6, 96, 112) | hsl(189.21, 90.6%, 23.08%) | 2.91:1 | 7.2:1 | sRGB | |
| 700 | oklch(37.0% 0.064 215.0) | #034855 | rgb(3, 72, 85) | hsl(189.4, 93.25%, 17.21%) | 2.06:1 | 10.18:1 | sRGB | |
| 800 | oklch(28.0% 0.049 215.0) | #012f38 | rgb(1, 47, 56) | hsl(189.98, 95.46%, 11.18%) | 1.47:1 | 14.33:1 | sRGB | |
| 900 | oklch(20.0% 0.035 215.0) | #001a20 | rgb(1, 26, 32) | hsl(191.39, 96.89%, 6.33%) | 1.17:1 | 17.97:1 | sRGB | |
| 950 | oklch(13.0% 0.022 215.0) | #00090d | rgb(0, 9, 13) | hsl(196.47, 97.9%, 2.52%) | 1.04:1 | 20.1:1 | sRGB |
Tailwind v4 @theme Snippet for Cyan Info
Copy into global.css
@theme {
--color-cyan-info-50: oklch(97.0% 0.023 215.0);
--color-cyan-info-100: oklch(93.0% 0.054 215.0);
--color-cyan-info-200: oklch(86.0% 0.110 215.0);
--color-cyan-info-300: oklch(76.0% 0.132 215.0);
--color-cyan-info-400: oklch(68.0% 0.160 215.0);
--color-cyan-info-500: oklch(54.0% 0.093 215.0);
--color-cyan-info-600: oklch(45.0% 0.078 215.0);
--color-cyan-info-700: oklch(37.0% 0.064 215.0);
--color-cyan-info-800: oklch(28.0% 0.049 215.0);
--color-cyan-info-900: oklch(20.0% 0.035 215.0);
--color-cyan-info-950: oklch(13.0% 0.022 215.0);
}Convert Cyan Info shades
Working with these shades in another format? Use the matching converter — the same values you see above, converted instantly with live gamut detection.