En yakın adlandırılmış renk · #67A0CD
#67A0CD
En yakın adlandırılmış renk: Canadian Tuxedo
#67A0CD (rgb(103 160 205), hsl(206 50% 60%), oklch(0.684 0.09 243.4)) en çok Canadian Tuxedo adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#67A0CD
oklch(0.684 0.09 243.4)
Renk dönüşümleri
- HEX
- #67a0cd
- RGB
- rgb(103 160 205)
- HSL
- hsl(206 50% 60%)
- HWB
- hwb(206 40% 20%)
- OKLCH
- oklch(0.684 0.09 243.4)
- OKLab
- oklab(0.684 -0.04 -0.08)
- CIE Lab
- lab(63.28 -9.87 -29.34)
- LCH
- lch(63.28 30.95 251.4)
- CMYK
- cmyk(50% 22% 0% 20%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 77A9D2
- 86B3D8
- 95BCDD
- A4C6E2
- B3CFE7
- C2D9EC
- D1E2F1
- E0ECF6
- F0F5FA
Koyu tonlar
- 598BB2
- 4B7698
- 3D617E
- 304E66
- 233B4E
- 172938
- 0C1923
- 04090F
- 000102
Gri tonlar
- 6A9DC5
- 6E9ABE
- 7197B6
- 7394AE
- 7690A6
- 788D9F
- 7A8A97
- 7C878F
- 7E8388
Renk uyumları
Tamamlayıcı +180°
- 67A0CD
Canadian Tuxedo
- C18D5D
≈ Espresso Tonic
Analog -30° +30°
- 67A0CD
Canadian Tuxedo
- 4EA8BB
≈ Blue Calypso
- 8796D1
≈ Mystic Iris
Üçlü +120° +240°
- 67A0CD
Canadian Tuxedo
- C98294
≈ Cashmere Rose
- 8FA364
≈ Scarpetta
Bölünmüş tamamlayıcı +150° +210°
- 67A0CD
Canadian Tuxedo
- CB8575
≈ Ginger Whisper
- AC9956
≈ Burnished Gold
Dörtlü +90° +180° +270°
- 67A0CD
Canadian Tuxedo
- BB85B1
≈ Joie de Vivre
- C18D5D
≈ Espresso Tonic
- 6CAA80
≈ Light Grass Green
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.80:1 · APCA Lc 54
Ag
AAASiyah üzerinde
WCAG 7.48:1 · APCA Lc 48
En iyi metin rengi: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
Kod parçacıkları
CSS
:root {
--canadian-tuxedo: #67a0cd;
--canadian-tuxedo-rgb: 103 160 205;
--canadian-tuxedo-oklch: oklch(0.684 0.09 243.4);
}
.element {
color: var(--canadian-tuxedo);
background-color: hsl(206 50% 60%);
border-color: oklch(0.684 0.09 243.4);
}Tailwind CSS v4
@theme {
--color-canadian-tuxedo: #67a0cd;
--color-canadian-tuxedo-50: #e1f9ff;
--color-canadian-tuxedo-100: #d0ecff;
--color-canadian-tuxedo-200: #b5d9f9;
--color-canadian-tuxedo-300: #91bde3;
--color-canadian-tuxedo-400: #6fa5d0;
--color-canadian-tuxedo-500: #4d8dbd;
--color-canadian-tuxedo-600: #4277a0;
--color-canadian-tuxedo-700: #355f80;
--color-canadian-tuxedo-800: #23465f;
--color-canadian-tuxedo-900: #183142;
--color-canadian-tuxedo-950: #081d2b;
}SCSS
$canadian-tuxedo: #67a0cd;
$canadian-tuxedo-rgb: 103, 160, 205;
$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);
}