Couleur nommée la plus proche · #4E90BC
#4E90BC
Couleur nommée la plus proche: Canadian Tuxedo
#4E90BC (rgb(78 144 188), hsl(204 45% 52%), oklch(0.628 0.095 239.8)) 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.
#4E90BC
oklch(0.628 0.095 239.8)
Conversions de couleur
- HEX
- #4e90bc
- RGB
- rgb(78 144 188)
- HSL
- hsl(204 45% 52%)
- HWB
- hwb(204 31% 26%)
- OKLCH
- oklch(0.628 0.095 239.8)
- OKLab
- oklab(0.628 -0.048 -0.082)
- CIE Lab
- lab(56.82 -11.82 -29.88)
- LCH
- lch(56.82 32.13 248.4)
- CMYK
- cmyk(59% 23% 0% 26%)
Teintes · Ombres · Tons
Teintes
- 619BC3
- 73A6CA
- 84B1D1
- 96BCD7
- A7C7DE
- B9D2E5
- CADDEB
- DCE8F2
- EDF4F9
Ombres
- 437DA3
- 386A8B
- 2D5773
- 23455D
- 193447
- 0F2432
- 07151F
- 02070D
- 000102
Tons
- 558FB6
- 5B8DB0
- 608CAA
- 668AA4
- 6B899E
- 6F8798
- 748592
- 78848C
- 7C8286
Harmonies de couleurs
Complémentaire +180°
- 4E90BC
Canadian Tuxedo
- B37A4B
≈ Rocky Racoon
Analogue -30° +30°
- 4E90BC
Canadian Tuxedo
- 3098A8
≈ Aqua Dance
- 7286C2
≈ Violets Are Blue
Triadique +120° +240°
- 4E90BC
Canadian Tuxedo
- B77086
≈ Tapestry
- 81914D
≈ Camo
Complémentaire divisée +150° +210°
- 4E90BC
Canadian Tuxedo
- BB7266
≈ Azalea Pot
- 9F863F
≈ Madagascar
Tétradique +90° +180° +270°
- 4E90BC
Canadian Tuxedo
- A973A4
≈ Orchid Kiss
- B37A4B
≈ Rocky Racoon
- 5D996A
≈ Wildness Mint
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.47:1 · APCA Lc 62
Ag
AASur noir
WCAG 6.03:1 · APCA Lc 40
Meilleure couleur de texte: #000000
WCAG 6.03:1 (AA) · APCA Lc 40
Contrast pairs
Extraits de code
CSS
:root {
--canadian-tuxedo: #4e90bc;
--canadian-tuxedo-rgb: 78 144 188;
--canadian-tuxedo-oklch: oklch(0.628 0.095 239.8);
}
.element {
color: var(--canadian-tuxedo);
background-color: hsl(204 45% 52%);
border-color: oklch(0.628 0.095 239.8);
}Tailwind CSS v4
@theme {
--color-canadian-tuxedo: #4e90bc;
--color-canadian-tuxedo-50: #def9ff;
--color-canadian-tuxedo-100: #cdedff;
--color-canadian-tuxedo-200: #b1dafa;
--color-canadian-tuxedo-300: #8cbee4;
--color-canadian-tuxedo-400: #68a6d1;
--color-canadian-tuxedo-500: #438ebe;
--color-canadian-tuxedo-600: #3a78a1;
--color-canadian-tuxedo-700: #2e6081;
--color-canadian-tuxedo-800: #1e475f;
--color-canadian-tuxedo-900: #143143;
--color-canadian-tuxedo-950: #051d2b;
}SCSS
$canadian-tuxedo: #4e90bc;
$canadian-tuxedo-rgb: 78, 144, 188;
$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);
}