Couleur nommée la plus proche · #5A94BB
#5A94BB
Couleur nommée la plus proche: Canadian Tuxedo
#5A94BB (rgb(90 148 187), hsl(204 42% 54%), oklch(0.642 0.085 239.4)) est la plus proche de la couleur nommée Canadian Tuxedo. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#5A94BB
oklch(0.642 0.085 239.4)
Conversions de couleur
- HEX
- #5a94bb
- RGB
- rgb(90 148 187)
- HSL
- hsl(204 42% 54%)
- HWB
- hwb(204 35% 27%)
- OKLCH
- oklch(0.642 0.085 239.4)
- OKLab
- oklab(0.642 -0.043 -0.073)
- CIE Lab
- lab(58.52 -11.26 -26.64)
- LCH
- lch(58.52 28.92 247.1)
- CMYK
- cmyk(52% 21% 0% 27%)
Teintes · Ombres · Tons
Teintes
- 6B9FC2
- 7BA9C9
- 8CB4D0
- 9CBED7
- ACC9DD
- BDD4E4
- CDDEEB
- DEE9F2
- EEF4F8
Ombres
- 4D80A2
- 416D8A
- 355A73
- 29485C
- 1E3646
- 132632
- 09161F
- 03080D
- 000102
Tons
- 5F92B5
- 6390AF
- 688EA9
- 6C8CA4
- 708A9E
- 738898
- 778692
- 7A848C
- 7D8286
Harmonies de couleurs
Complémentaire +180°
- 5A94BB
Canadian Tuxedo
- B38057
≈ Komodo Dragon
Analogue -30° +30°
- 5A94BB
Canadian Tuxedo
- 459BA9
≈ Sea Sparkle
- 788BC1
≈ Dayflower Blue
Triadique +120° +240°
- 5A94BB
Canadian Tuxedo
- B7778B
≈ Strawberry Surprise
- 879458
≈ Pretty Maiden
Complémentaire divisée +150° +210°
- 5A94BB
Canadian Tuxedo
- BB796F
≈ Faneuil Brick
- A18A4E
≈ Mustard Gold
Tétradique +90° +180° +270°
- 5A94BB
Canadian Tuxedo
- AA7AA6
≈ Victorian Violet
- B38057
≈ Komodo Dragon
- 679B71
≈ Rosemary Green
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.28:1 · APCA Lc 60
Ag
AASur noir
WCAG 6.38:1 · APCA Lc 42
Meilleure couleur de texte: #000000
WCAG 6.38:1 (AA) · APCA Lc 42
Contrast pairs
Extraits de code
CSS
:root {
--canadian-tuxedo: #5a94bb;
--canadian-tuxedo-rgb: 90 148 187;
--canadian-tuxedo-oklch: oklch(0.642 0.085 239.4);
}
.element {
color: var(--canadian-tuxedo);
background-color: hsl(204 42% 54%);
border-color: oklch(0.642 0.085 239.4);
}Tailwind CSS v4
@theme {
--color-canadian-tuxedo: #5a94bb;
--color-canadian-tuxedo-50: #e1f9ff;
--color-canadian-tuxedo-100: #d0ecff;
--color-canadian-tuxedo-200: #b5daf6;
--color-canadian-tuxedo-300: #91bddf;
--color-canadian-tuxedo-400: #6fa6cb;
--color-canadian-tuxedo-500: #4c8eb8;
--color-canadian-tuxedo-600: #42789c;
--color-canadian-tuxedo-700: #34607d;
--color-canadian-tuxedo-800: #23475c;
--color-canadian-tuxedo-900: #183140;
--color-canadian-tuxedo-950: #081d29;
}SCSS
$canadian-tuxedo: #5a94bb;
$canadian-tuxedo-rgb: 90, 148, 187;
$canadian-tuxedo-light: mix(#fff, $canadian-tuxedo, 20%);
$canadian-tuxedo-dark: mix(#000, $canadian-tuxedo, 20%);
.element {
color: $canadian-tuxedo;
box-shadow: 0 0 0 2px rgba($canadian-tuxedo, 0.35);
}