Couleur nommée la plus proche · #5A98C8
#5A98C8
Couleur nommée la plus proche: Canadian Tuxedo
#5A98C8 (rgb(90 152 200), hsl(206 50% 57%), oklch(0.657 0.096 243.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.
#5A98C8
oklch(0.657 0.096 243.4)
Conversions de couleur
- HEX
- #5a98c8
- RGB
- rgb(90 152 200)
- HSL
- hsl(206 50% 57%)
- HWB
- hwb(206 35% 22%)
- OKLCH
- oklch(0.657 0.096 243.4)
- OKLab
- oklab(0.657 -0.043 -0.086)
- CIE Lab
- lab(60.15 -10.18 -31.43)
- LCH
- lch(60.15 33.04 252.1)
- CMYK
- cmyk(55% 24% 0% 22%)
Teintes · Ombres · Tons
Teintes
- 6BA2CE
- 7CACD4
- 8CB7D9
- 9DC1DF
- ADCBE4
- BDD6EA
- CDE0EF
- DEEAF5
- EEF5FA
Ombres
- 4D84AE
- 417094
- 355C7B
- 294A63
- 1E384C
- 132736
- 091721
- 03080F
- 000102
Tons
- 5F96C1
- 6494BA
- 6891B2
- 6C8FAB
- 708DA4
- 748A9D
- 778896
- 7A858F
- 7D8387
Harmonies de couleurs
Complémentaire +180°
- 5A98C8
Canadian Tuxedo
- BB8450
≈ Canvas
Analogue -30° +30°
- 5A98C8
Canadian Tuxedo
- 3AA1B5
≈ Aquatic Cool
- 7E8DCD
≈ Pansy Garden
Triadique +120° +240°
- 5A98C8
Canadian Tuxedo
- C3788B
≈ Japanese Coral
- 869B57
≈ Pine Leaves
Complémentaire divisée +150° +210°
- 5A98C8
Canadian Tuxedo
- C57B6A
≈ First Lady
- A59047
≈ Off the Grid
Tétradique +90° +180° +270°
- 5A98C8
Canadian Tuxedo
- B57BAA
≈ Cheddar Pink Mauve
- BB8450
≈ Canvas
- 60A375
≈ Shiny Shamrock
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.10:1 · APCA Lc 58
Ag
AASur noir
WCAG 6.76:1 · APCA Lc 44
Meilleure couleur de texte: #000000
WCAG 6.76:1 (AA) · APCA Lc 44
Contrast pairs
Extraits de code
CSS
:root {
--canadian-tuxedo: #5a98c8;
--canadian-tuxedo-rgb: 90 152 200;
--canadian-tuxedo-oklch: oklch(0.657 0.096 243.4);
}
.element {
color: var(--canadian-tuxedo);
background-color: hsl(206 50% 57%);
border-color: oklch(0.657 0.096 243.4);
}Tailwind CSS v4
@theme {
--color-canadian-tuxedo: #5a98c8;
--color-canadian-tuxedo-50: #dff9ff;
--color-canadian-tuxedo-100: #ceecff;
--color-canadian-tuxedo-200: #b3d9fc;
--color-canadian-tuxedo-300: #8ebde6;
--color-canadian-tuxedo-400: #6aa5d3;
--color-canadian-tuxedo-500: #478dc1;
--color-canadian-tuxedo-600: #3d77a3;
--color-canadian-tuxedo-700: #315f83;
--color-canadian-tuxedo-800: #204661;
--color-canadian-tuxedo-900: #153144;
--color-canadian-tuxedo-950: #061d2c;
}SCSS
$canadian-tuxedo: #5a98c8;
$canadian-tuxedo-rgb: 90, 152, 200;
$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);
}