Dichtstbijzijnde benoemde kleur · #5A94BB
#5A94BB
Dichtstbijzijnde benoemde kleur: Canadian Tuxedo
#5A94BB (rgb(90 148 187), hsl(204 42% 54%), oklch(0.642 0.085 239.4)) komt het dichtst bij de benoemde kleur Canadian Tuxedo. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#5A94BB
oklch(0.642 0.085 239.4)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- 6B9FC2
- 7BA9C9
- 8CB4D0
- 9CBED7
- ACC9DD
- BDD4E4
- CDDEEB
- DEE9F2
- EEF4F8
Schaduwen
- 4D80A2
- 416D8A
- 355A73
- 29485C
- 1E3646
- 132632
- 09161F
- 03080D
- 000102
Tonen
- 5F92B5
- 6390AF
- 688EA9
- 6C8CA4
- 708A9E
- 738898
- 778692
- 7A848C
- 7D8286
Kleurharmonieën
Complementair +180°
- 5A94BB
Canadian Tuxedo
- B38057
≈ Komodo Dragon
Analoog -30° +30°
- 5A94BB
Canadian Tuxedo
- 459BA9
≈ Sea Sparkle
- 788BC1
≈ Dayflower Blue
Triadisch +120° +240°
- 5A94BB
Canadian Tuxedo
- B7778B
≈ Strawberry Surprise
- 879458
≈ Pretty Maiden
Gesplitst complementair +150° +210°
- 5A94BB
Canadian Tuxedo
- BB796F
≈ Faneuil Brick
- A18A4E
≈ Mustard Gold
Tetradisch +90° +180° +270°
- 5A94BB
Canadian Tuxedo
- AA7AA6
≈ Victorian Violet
- B38057
≈ Komodo Dragon
- 679B71
≈ Rosemary Green
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 3.28:1 · APCA Lc 60
Ag
AAOp zwart
WCAG 6.38:1 · APCA Lc 42
Beste tekstkleur: #000000
WCAG 6.38:1 (AA) · APCA Lc 42
Contrast pairs
Codefragmenten
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);
}