Cor nomeada mais próxima · #4E90BC
#4E90BC
Cor nomeada mais próxima: Canadian Tuxedo
#4E90BC (rgb(78 144 188), hsl(204 45% 52%), oklch(0.628 0.095 239.8)) é mais próxima da cor nomeada Canadian Tuxedo. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#4E90BC
oklch(0.628 0.095 239.8)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- 619BC3
- 73A6CA
- 84B1D1
- 96BCD7
- A7C7DE
- B9D2E5
- CADDEB
- DCE8F2
- EDF4F9
Sombras
- 437DA3
- 386A8B
- 2D5773
- 23455D
- 193447
- 0F2432
- 07151F
- 02070D
- 000102
Tons
- 558FB6
- 5B8DB0
- 608CAA
- 668AA4
- 6B899E
- 6F8798
- 748592
- 78848C
- 7C8286
Harmonias de cor
Complementar +180°
- 4E90BC
Canadian Tuxedo
- B37A4B
≈ Rocky Racoon
Análoga -30° +30°
- 4E90BC
Canadian Tuxedo
- 3098A8
≈ Aqua Dance
- 7286C2
≈ Violets Are Blue
Tríade +120° +240°
- 4E90BC
Canadian Tuxedo
- B77086
≈ Tapestry
- 81914D
≈ Camo
Complementar dividida +150° +210°
- 4E90BC
Canadian Tuxedo
- BB7266
≈ Azalea Pot
- 9F863F
≈ Madagascar
Tétrade +90° +180° +270°
- 4E90BC
Canadian Tuxedo
- A973A4
≈ Orchid Kiss
- B37A4B
≈ Rocky Racoon
- 5D996A
≈ Wildness Mint
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 3.47:1 · APCA Lc 62
Ag
AASobre preto
WCAG 6.03:1 · APCA Lc 40
Melhor cor de texto: #000000
WCAG 6.03:1 (AA) · APCA Lc 40
Contrast pairs
Trechos de código
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);
}