Cor nomeada mais próxima · #5092BB
#5092BB
Cor nomeada mais próxima: Canadian Tuxedo
#5092BB (rgb(80 146 187), hsl(203 44% 52%), oklch(0.633 0.092 237.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.
#5092BB
oklch(0.633 0.092 237.8)
Conversões de cor
- HEX
- #5092bb
- RGB
- rgb(80 146 187)
- HSL
- hsl(203 44% 52%)
- HWB
- hwb(203 31% 27%)
- OKLCH
- oklch(0.633 0.092 237.8)
- OKLab
- oklab(0.633 -0.049 -0.077)
- CIE Lab
- lab(57.47 -12.64 -28.31)
- LCH
- lch(57.47 31 245.9)
- CMYK
- cmyk(57% 22% 0% 27%)
Tons claros · Sombras · Tons
Tons claros
- 639DC2
- 74A8C9
- 86B2D0
- 97BDD7
- A8C8DE
- B9D3E4
- CBDEEB
- DCE9F2
- EDF4F8
Sombras
- 447EA2
- 396B8A
- 2E5873
- 24465C
- 1A3546
- 102532
- 07161F
- 02080D
- 000102
Tons
- 5690B5
- 5C8FAF
- 628DA9
- 678BA4
- 6C8A9E
- 708898
- 748692
- 78848C
- 7C8286
Harmonias de cor
Complementar +180°
- 5092BB
Canadian Tuxedo
- B47C50
≈ Cowboy Hat
Análoga -30° +30°
- 5092BB
Canadian Tuxedo
- 3799A7
≈ Aqua Dance
- 7288C2
≈ Violets Are Blue
Tríade +120° +240°
- 5092BB
Canadian Tuxedo
- B7728A
≈ Strawberry Surprise
- 85924F
≈ Pretty Maiden
Complementar dividida +150° +210°
- 5092BB
Canadian Tuxedo
- BB746B
≈ Morocco
- A18744
≈ Ecru Olive
Tétrade +90° +180° +270°
- 5092BB
Canadian Tuxedo
- A876A6
≈ Orchid Kiss
- B47C50
≈ Cowboy Hat
- 62996A
≈ Leafy
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 3.40:1 · APCA Lc 61
Ag
AASobre preto
WCAG 6.17:1 · APCA Lc 40
Melhor cor de texto: #000000
WCAG 6.17:1 (AA) · APCA Lc 40
Contrast pairs
Trechos de código
CSS
:root {
--canadian-tuxedo: #5092bb;
--canadian-tuxedo-rgb: 80 146 187;
--canadian-tuxedo-oklch: oklch(0.633 0.092 237.8);
}
.element {
color: var(--canadian-tuxedo);
background-color: hsl(203 44% 52%);
border-color: oklch(0.633 0.092 237.8);
}Tailwind CSS v4
@theme {
--color-canadian-tuxedo: #5092bb;
--color-canadian-tuxedo-50: #def9ff;
--color-canadian-tuxedo-100: #cdedff;
--color-canadian-tuxedo-200: #b1daf8;
--color-canadian-tuxedo-300: #8cbee2;
--color-canadian-tuxedo-400: #68a7ce;
--color-canadian-tuxedo-500: #448ebc;
--color-canadian-tuxedo-600: #3a799e;
--color-canadian-tuxedo-700: #2e617f;
--color-canadian-tuxedo-800: #1f475e;
--color-canadian-tuxedo-900: #143142;
--color-canadian-tuxedo-950: #061d2a;
}SCSS
$canadian-tuxedo: #5092bb;
$canadian-tuxedo-rgb: 80, 146, 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);
}