Couleur nommée · #587C8D
Technical Blue
Technical Blue correspond à #587C8D : rgb(88 124 141), hsl(199 23% 45%), oklch(0.566 0.048 228.9). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Cyan mean? → · Technical Blue color name →
#587C8D
oklch(0.566 0.048 228.9)
Conversions de couleur
- HEX
- #587c8d
- RGB
- rgb(88 124 141)
- HSL
- hsl(199 23% 45%)
- HWB
- hwb(199 35% 45%)
- OKLCH
- oklch(0.566 0.048 228.9)
- OKLab
- oklab(0.566 -0.032 -0.036)
- CIE Lab
- lab(49.78 -9.76 -13.56)
- LCH
- lch(49.78 16.71 234.2)
- CMYK
- cmyk(38% 12% 0% 45%)
Teintes · Ombres · Tons
Teintes
- 688898
- 7895A3
- 88A2AE
- 99AFB9
- A9BCC5
- BAC9D0
- CBD6DC
- DCE4E7
- EDF1F3
Ombres
- 4B6B7A
- 3F5A67
- 334A55
- 283B44
- 1D2C33
- 121E23
- 091114
- 030507
- 000101
Tons
- 5C7C8C
- 617D8B
- 657D89
- 697E88
- 6D7E87
- 717F85
- 757F84
- 797F83
- 7C8081
Harmonies de couleurs
Complémentaire +180°
- 587C8D
Technical Blue
- 8E6E5D
≈ Sea Lion Brown
Analogue -30° +30°
- 587C8D
Technical Blue
- 537F81
≈ Nickel Ore Green
- 657793
≈ Niche
Triadique +120° +240°
- 587C8D
Technical Blue
- 8C6B7B
≈ Blunt Violet
- 787958
≈ Loden Green
Complémentaire divisée +150° +210°
- 587C8D
Technical Blue
- 916B6B
≈ San Francisco Mauve
- 867356
≈ Leather Loafers
Tétradique +90° +180° +270°
- 587C8D
Technical Blue
- 836D89
≈ Grey Purple
- 8E6E5D
≈ Sea Lion Brown
- 687D62
≈ Emerald City
Contraste et accessibilité
Ag
FailSur blanc
WCAG 4.48:1 · APCA Lc 71
Ag
AASur noir
WCAG 4.68:1 · APCA Lc 31
Meilleure couleur de texte: #000000
WCAG 4.68:1 (AA) · APCA Lc 31
Contrast pairs
Extraits de code
CSS
:root {
--technical-blue: #587c8d;
--technical-blue-rgb: 88 124 141;
--technical-blue-oklch: oklch(0.566 0.048 228.9);
}
.element {
color: var(--technical-blue);
background-color: hsl(199 23% 45%);
border-color: oklch(0.566 0.048 228.9);
}Tailwind CSS v4
@theme {
--color-technical-blue: #587c8d;
--color-technical-blue-50: #e8f8ff;
--color-technical-blue-100: #d9ebf5;
--color-technical-blue-200: #c0d9e5;
--color-technical-blue-300: #9fbccc;
--color-technical-blue-400: #81a4b5;
--color-technical-blue-500: #648da0;
--color-technical-blue-600: #557787;
--color-technical-blue-700: #445f6c;
--color-technical-blue-800: #30464f;
--color-technical-blue-900: #213037;
--color-technical-blue-950: #101d22;
}SCSS
$technical-blue: #587c8d;
$technical-blue-rgb: 88, 124, 141;
$technical-blue-light: mix(#fff, $technical-blue, 20%);
$technical-blue-dark: mix(#000, $technical-blue, 20%);
.element {
color: $technical-blue;
box-shadow: 0 0 0 2px rgba($technical-blue, 0.35);
}