Trusty Blue
Brand & PlayfulThe canonical primary action color with high sRGB clarity and stable hue under extreme lightness transformations.
About the Trusty Blue palette
The canonical primary action color with high sRGB clarity and stable hue under extreme lightness transformations. The scale is anchored at hue 255 in OKLCH, so every step keeps the same hue while lightness moves in perceptually even steps from 50 to 950. The 500 step (#0278e7) is your base color. Shades 600-950 pass WCAG 2.1 AA against white and shades 50, 100, 200, 300, 400, 500 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-trusty-blue-*
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.014 255.0) | #eff6ff | rgb(239, 246, 255) | hsl(213.98, 97.51%, 96.81%) | 19.3:1 | 1.09:1 | sRGB | |
| 100 | oklch(93.0% 0.033 255.0) | #d9eaff | rgb(217, 234, 255) | hsl(213.93, 97.51%, 92.53%) | 17.16:1 | 1.22:1 | sRGB | |
| 200 | oklch(86.0% 0.069 255.0) | #b3d4fe | rgb(179, 212, 254) | hsl(213.84, 97.68%, 84.96%) | 13.77:1 | 1.53:1 | sRGB | |
| 300 | oklch(76.0% 0.122 255.0) | #7ab4fd | rgb(122, 180, 253) | hsl(213.62, 97.75%, 73.69%) | 9.77:1 | 2.15:1 | sRGB | |
| 400 | oklch(64.0% 0.190 255.0) | #268bfc | rgb(38, 139, 252) | hsl(211.71, 96.83%, 56.82%) | 6.18:1 | 3.4:1 | sRGB | |
| 500 | oklch(58.0% 0.190 255.0) | #0278e7 | rgb(2, 120, 231) | hsl(209.19, 97.89%, 45.7%) | 4.84:1 | 4.34:1 | sRGB | |
| 600 | oklch(45.0% 0.145 255.0) | #0453a3 | rgb(4, 83, 163) | hsl(210.09, 94.66%, 32.83%) | 2.77:1 | 7.58:1 | sRGB | |
| 700 | oklch(37.0% 0.119 255.0) | #023e7d | rgb(2, 62, 125) | hsl(210.59, 96.11%, 24.91%) | 1.99:1 | 10.56:1 | sRGB | |
| 800 | oklch(28.0% 0.090 255.0) | #012854 | rgb(1, 40, 84) | hsl(211.86, 97.53%, 16.64%) | 1.43:1 | 14.66:1 | sRGB | |
| 900 | oklch(20.0% 0.065 255.0) | #001532 | rgb(0, 21, 50) | hsl(214.74, 98.41%, 9.92%) | 1.15:1 | 18.21:1 | sRGB | |
| 950 | oklch(13.0% 0.042 255.0) | #000717 | rgb(0, 7, 23) | hsl(222.4, 99.03%, 4.62%) | 1.04:1 | 20.14:1 | sRGB |
Tailwind v4 @theme Snippet for Trusty Blue
Copy into global.css
@theme {
--color-trusty-blue-50: oklch(97.0% 0.014 255.0);
--color-trusty-blue-100: oklch(93.0% 0.033 255.0);
--color-trusty-blue-200: oklch(86.0% 0.069 255.0);
--color-trusty-blue-300: oklch(76.0% 0.122 255.0);
--color-trusty-blue-400: oklch(64.0% 0.190 255.0);
--color-trusty-blue-500: oklch(58.0% 0.190 255.0);
--color-trusty-blue-600: oklch(45.0% 0.145 255.0);
--color-trusty-blue-700: oklch(37.0% 0.119 255.0);
--color-trusty-blue-800: oklch(28.0% 0.090 255.0);
--color-trusty-blue-900: oklch(20.0% 0.065 255.0);
--color-trusty-blue-950: oklch(13.0% 0.042 255.0);
}Convert Trusty Blue shades
Working with these shades in another format? Use the matching converter — the same values you see above, converted instantly with live gamut detection.