Adlandırılmış renk · #6E8FC0
Purple Hyacinth
Purple Hyacinth, #6E8FC0: rgb(110 143 192), hsl(216 39% 59%), oklch(0.645 0.083 258.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Purple Hyacinth color name →
#6E8FC0
oklch(0.645 0.083 258.1)
Renk dönüşümleri
- HEX
- #6e8fc0
- RGB
- rgb(110 143 192)
- HSL
- hsl(216 39% 59%)
- HWB
- hwb(216 43% 25%)
- OKLCH
- oklch(0.645 0.083 258.1)
- OKLab
- oklab(0.645 -0.017 -0.081)
- CIE Lab
- lab(58.37 -2.09 -29.57)
- LCH
- lch(58.37 29.64 266)
- CMYK
- cmyk(43% 26% 0% 25%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 7C9AC7
- 8AA5CD
- 98B0D4
- A6BBDA
- B5C6E0
- C3D1E7
- D2DDED
- E1E8F3
- F0F4F9
Koyu tonlar
- 5F7CA7
- 50698E
- 415776
- 33455F
- 263449
- 192434
- 0E1520
- 04070E
- 010102
Gri tonlar
- 708EBA
- 728CB3
- 748BAD
- 7689A7
- 7888A0
- 79869A
- 7B8593
- 7D838D
- 7E8287
Renk uyumları
Tamamlayıcı +180°
- 6E8FC0
Purple Hyacinth
- A98751
≈ Teak
Analog -30° +30°
- 6E8FC0
Purple Hyacinth
- 5298B5
≈ Steel Light Blue
- 8B86BD
≈ Heliotropic Mauve
Üçlü +120° +240°
- 6E8FC0
Purple Hyacinth
- BB797A
≈ Nipple
- 749A68
≈ Mosslands
Bölünmüş tamamlayıcı +150° +210°
- 6E8FC0
Purple Hyacinth
- B77E61
≈ Silken Chocolate
- 929254
≈ Amazon Queen
Dörtlü +90° +180° +270°
- 6E8FC0
Purple Hyacinth
- B37996
≈ Choral Singer
- A98751
≈ Teak
- 579E84
≈ Wintergreen Shadow
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.30:1 · APCA Lc 60
Ag
AASiyah üzerinde
WCAG 6.35:1 · APCA Lc 41
En iyi metin rengi: #000000
WCAG 6.35:1 (AA) · APCA Lc 41
Contrast pairs
Kod parçacıkları
CSS
:root {
--purple-hyacinth: #6e8fc0;
--purple-hyacinth-rgb: 110 143 192;
--purple-hyacinth-oklch: oklch(0.645 0.083 258.1);
}
.element {
color: var(--purple-hyacinth);
background-color: hsl(216 39% 59%);
border-color: oklch(0.645 0.083 258.1);
}Tailwind CSS v4
@theme {
--color-purple-hyacinth: #6e8fc0;
--color-purple-hyacinth-50: #e8f6ff;
--color-purple-hyacinth-100: #d8e9ff;
--color-purple-hyacinth-200: #c0d6f8;
--color-purple-hyacinth-300: #9fb9e2;
--color-purple-hyacinth-400: #80a0d0;
--color-purple-hyacinth-500: #6387bd;
--color-purple-hyacinth-600: #55739f;
--color-purple-hyacinth-700: #435c80;
--color-purple-hyacinth-800: #2f435f;
--color-purple-hyacinth-900: #202f42;
--color-purple-hyacinth-950: #0f1b2b;
}SCSS
$purple-hyacinth: #6e8fc0;
$purple-hyacinth-rgb: 110, 143, 192;
$purple-hyacinth-light: mix(#fff, $purple-hyacinth, 20%);
$purple-hyacinth-dark: mix(#000, $purple-hyacinth, 20%);
.element {
color: $purple-hyacinth;
box-shadow: 0 0 0 2px rgba($purple-hyacinth, 0.35);
}