Dichtstbijzijnde benoemde kleur · #5092BB
#5092BB
Dichtstbijzijnde benoemde kleur: Canadian Tuxedo
#5092BB (rgb(80 146 187), hsl(203 44% 52%), oklch(0.633 0.092 237.8)) 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.
#5092BB
oklch(0.633 0.092 237.8)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- 639DC2
- 74A8C9
- 86B2D0
- 97BDD7
- A8C8DE
- B9D3E4
- CBDEEB
- DCE9F2
- EDF4F8
Schaduwen
- 447EA2
- 396B8A
- 2E5873
- 24465C
- 1A3546
- 102532
- 07161F
- 02080D
- 000102
Tonen
- 5690B5
- 5C8FAF
- 628DA9
- 678BA4
- 6C8A9E
- 708898
- 748692
- 78848C
- 7C8286
Kleurharmonieën
Complementair +180°
- 5092BB
Canadian Tuxedo
- B47C50
≈ Cowboy Hat
Analoog -30° +30°
- 5092BB
Canadian Tuxedo
- 3799A7
≈ Aqua Dance
- 7288C2
≈ Violets Are Blue
Triadisch +120° +240°
- 5092BB
Canadian Tuxedo
- B7728A
≈ Strawberry Surprise
- 85924F
≈ Pretty Maiden
Gesplitst complementair +150° +210°
- 5092BB
Canadian Tuxedo
- BB746B
≈ Morocco
- A18744
≈ Ecru Olive
Tetradisch +90° +180° +270°
- 5092BB
Canadian Tuxedo
- A876A6
≈ Orchid Kiss
- B47C50
≈ Cowboy Hat
- 62996A
≈ Leafy
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 3.40:1 · APCA Lc 61
Ag
AAOp zwart
WCAG 6.17:1 · APCA Lc 40
Beste tekstkleur: #000000
WCAG 6.17:1 (AA) · APCA Lc 40
Contrast pairs
Codefragmenten
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);
}