Nazwany kolor · #CCAAFF
Purple Hepatica
Purple Hepatica to #CCAAFF: rgb(204 170 255), hsl(264 100% 83%), oklch(0.799 0.123 302.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Purple Hepatica color name →
#CCAAFF
oklch(0.799 0.123 302.1)
Konwersje koloru
- HEX
- #ccaaff
- RGB
- rgb(204 170 255)
- HSL
- hsl(264 100% 83%)
- HWB
- hwb(264 67% 0%)
- OKLCH
- oklch(0.799 0.123 302.1)
- OKLab
- oklab(0.799 0.065 -0.104)
- CIE Lab
- lab(75.02 25.12 -37.79)
- LCH
- lch(75.02 45.37 303.6)
- CMYK
- cmyk(20% 33% 0% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D1B3FF
- D6BBFF
- DBC4FF
- E0CCFF
- E5D5FF
- EADDFF
- EFE6FF
- F5EEFF
- FAF7FF
Odcienie ciemniejsze
- B193DE
- 977DBE
- 7E689E
- 655380
- 4E3F63
- 372D48
- 221B2E
- 0F0B16
- 020103
Tony
- C4A6F2
- BCA2E5
- B49ED8
- AD9ACB
- A596BE
- 9D91B2
- 968DA5
- 8F8999
- 87848C
Harmonie kolorów
Komplementarna +180°
- CCAAFF
Purple Hepatica
- B0CA6D
≈ Young Leaf
Analogowa -30° +30°
- CCAAFF
Purple Hepatica
- A6BAFF
≈ Pastel Blue
- EC9FE0
≈ Candy Floss
Triada +120° +240°
- CCAAFF
Purple Hepatica
- F6AB66
≈ Blazing Autumn
- 4AD7C3
≈ Turquoise Panic
Komplementarna rozszczepiona +150° +210°
- CCAAFF
Purple Hepatica
- D9BB58
≈ Golden Bass
- 7DD496
≈ Enchanted Emerald
Tetrada +90° +180° +270°
- CCAAFF
Purple Hepatica
- FFA18E
≈ Tangerine Cream
- B0CA6D
≈ Young Leaf
- 43D2EB
≈ Thousand Sons Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.95:1 · APCA Lc 37
Ag
AAANa czerni
WCAG 10.76:1 · APCA Lc 65
Najlepszy kolor tekstu: #000000
WCAG 10.76:1 (AAA) · APCA Lc 65
Contrast pairs
Fragmenty kodu
CSS
:root {
--purple-hepatica: #ccaaff;
--purple-hepatica-rgb: 204 170 255;
--purple-hepatica-oklch: oklch(0.799 0.123 302.1);
}
.element {
color: var(--purple-hepatica);
background-color: hsl(264 100% 83%);
border-color: oklch(0.799 0.123 302.1);
}Tailwind CSS v4
@theme {
--color-purple-hepatica: #ccaaff;
--color-purple-hepatica-50: #fdedff;
--color-purple-hepatica-100: #f1deff;
--color-purple-hepatica-200: #dfc8ff;
--color-purple-hepatica-300: #c5a8eb;
--color-purple-hepatica-400: #ac8cdb;
--color-purple-hepatica-500: #9670c9;
--color-purple-hepatica-600: #7f5faa;
--color-purple-hepatica-700: #654c88;
--color-purple-hepatica-800: #493766;
--color-purple-hepatica-900: #332648;
--color-purple-hepatica-950: #1f142f;
}SCSS
$purple-hepatica: #ccaaff;
$purple-hepatica-rgb: 204, 170, 255;
$purple-hepatica-light: mix(#fff, $purple-hepatica, 20%);
$purple-hepatica-dark: mix(#000, $purple-hepatica, 20%);
.element {
color: $purple-hepatica;
box-shadow: 0 0 0 2px rgba($purple-hepatica, 0.35);
}