Adlandırılmış renk · #6F729F
Hyacinth Mauve
Hyacinth Mauve, #6F729F: rgb(111 114 159), hsl(236 20% 53%), oklch(0.567 0.069 281). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Hyacinth Mauve color name →
#6F729F
oklch(0.567 0.069 281)
Renk dönüşümleri
- HEX
- #6f729f
- RGB
- rgb(111 114 159)
- HSL
- hsl(236 20% 53%)
- HWB
- hwb(236 44% 38%)
- OKLCH
- oklch(0.567 0.069 281)
- OKLab
- oklab(0.567 0.013 -0.068)
- CIE Lab
- lab(49.13 6.97 -24.86)
- LCH
- lch(49.13 25.82 285.7)
- CMYK
- cmyk(30% 28% 0% 38%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 7C7FA9
- 8A8DB2
- 989BBC
- A6A8C5
- B4B6CF
- C3C5D9
- D1D3E2
- E0E2EC
- F0F0F5
Koyu tonlar
- 60628A
- 515375
- 424461
- 34364D
- 27283B
- 1A1B29
- 0E0E18
- 040409
- 010101
Gri tonlar
- 71749C
- 727599
- 747796
- 767893
- 777990
- 797B8D
- 7B7C8A
- 7C7D87
- 7E7F83
Renk uyumları
Tamamlayıcı +180°
- 6F729F
Hyacinth Mauve
- 7F7847
≈ Tribal
Analog -30° +30°
- 6F729F
Hyacinth Mauve
- 587A9E
≈ Blue Plate
- 846B95
≈ Ornate
Üçlü +120° +240°
- 6F729F
Hyacinth Mauve
- 9A6957
≈ Muscovado Sugar
- 508369
≈ Tournament Field
Bölünmüş tamamlayıcı +150° +210°
- 6F729F
Hyacinth Mauve
- 917048
≈ Gold Spike
- 687F54
≈ Mint Leaves
Dörtlü +90° +180° +270°
- 6F729F
Hyacinth Mauve
- 9B656C
≈ Soft Bromeliad
- 7F7847
≈ Tribal
- 408480
≈ Emu Egg
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 4.58:1 · APCA Lc 72
Ag
AASiyah üzerinde
WCAG 4.58:1 · APCA Lc 30
En iyi metin rengi: #000000
WCAG 4.58:1 (AA) · APCA Lc 30
Contrast pairs
Kod parçacıkları
CSS
:root {
--hyacinth-mauve: #6f729f;
--hyacinth-mauve-rgb: 111 114 159;
--hyacinth-mauve-oklch: oklch(0.567 0.069 281);
}
.element {
color: var(--hyacinth-mauve);
background-color: hsl(236 20% 53%);
border-color: oklch(0.567 0.069 281);
}Tailwind CSS v4
@theme {
--color-hyacinth-mauve: #6f729f;
--color-hyacinth-mauve-50: #f2f3ff;
--color-hyacinth-mauve-100: #e4e5ff;
--color-hyacinth-mauve-200: #cfd1f2;
--color-hyacinth-mauve-300: #b2b3db;
--color-hyacinth-mauve-400: #979ac7;
--color-hyacinth-mauve-500: #7e81b4;
--color-hyacinth-mauve-600: #6a6d98;
--color-hyacinth-mauve-700: #55577a;
--color-hyacinth-mauve-800: #3d405a;
--color-hyacinth-mauve-900: #2a2c3f;
--color-hyacinth-mauve-950: #181928;
}SCSS
$hyacinth-mauve: #6f729f;
$hyacinth-mauve-rgb: 111, 114, 159;
$hyacinth-mauve-light: mix(#fff, $hyacinth-mauve, 20%);
$hyacinth-mauve-dark: mix(#000, $hyacinth-mauve, 20%);
.element {
color: $hyacinth-mauve;
box-shadow: 0 0 0 2px rgba($hyacinth-mauve, 0.35);
}