Nazwany kolor · #553E51
Currant Violet
Currant Violet to #553E51: rgb(85 62 81), hsl(310 16% 29%), oklch(0.396 0.044 332.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Currant Violet color name →
#553E51
oklch(0.396 0.044 332.5)
Konwersje koloru
- HEX
- #553e51
- RGB
- rgb(85 62 81)
- HSL
- hsl(310 16% 29%)
- HWB
- hwb(310 24% 67%)
- OKLCH
- oklch(0.396 0.044 332.5)
- OKLab
- oklab(0.396 0.039 -0.02)
- CIE Lab
- lab(29.35 13.06 -7.42)
- LCH
- lch(29.35 15.03 330.4)
- CMYK
- cmyk(0% 27% 5% 67%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 654F61
- 756171
- 857382
- 968692
- A799A4
- B8ADB5
- C9C1C7
- DBD5DA
- EDEAEC
Odcienie ciemniejsze
- 493545
- 3D2B3A
- 31232F
- 261A24
- 1C121A
- 110A10
- 080407
- 020102
- 000000
Tony
- 594456
- 5E4B5A
- 62515F
- 665863
- 6B5E68
- 6F656D
- 736C72
- 777276
- 7C797B
Harmonie kolorów
Komplementarna +180°
- 553E51
Currant Violet
- 344E3B
≈ Angry Gremlin
Analogowa -30° +30°
- 553E51
Currant Violet
- 4B415A
≈ Club Grey
- 5B3D44
≈ Hibiscus Punch
Triada +120° +240°
- 553E51
Currant Violet
- 4F462B
≈ Tinny Tin
- 294D55
≈ Hurricane Green Blue
Komplementarna rozszczepiona +150° +210°
- 553E51
Currant Violet
- 424B30
≈ Matsuba Green
- 2A4E49
≈ Carriage Green
Tetrada +90° +180° +270°
- 553E51
Currant Violet
- 58422E
≈ Garden Loam
- 344E3B
≈ Angry Gremlin
- 314A5C
≈ Dilly Blue
Kontrast i dostępność
Ag
AAANa bieli
WCAG 9.57:1 · APCA Lc 92
Ag
FailNa czerni
WCAG 2.19:1 · APCA Lc 10
Najlepszy kolor tekstu: #FFFFFF
WCAG 9.57:1 (AAA) · APCA Lc 92
Contrast pairs
Fragmenty kodu
CSS
:root {
--currant-violet: #553e51;
--currant-violet-rgb: 85 62 81;
--currant-violet-oklch: oklch(0.396 0.044 332.5);
}
.element {
color: var(--currant-violet);
background-color: hsl(310 16% 29%);
border-color: oklch(0.396 0.044 332.5);
}Tailwind CSS v4
@theme {
--color-currant-violet: #553e51;
--color-currant-violet-50: #fef1fa;
--color-currant-violet-100: #f2e3ee;
--color-currant-violet-200: #e1cedc;
--color-currant-violet-300: #c6afc1;
--color-currant-violet-400: #af95aa;
--color-currant-violet-500: #987c93;
--color-currant-violet-600: #81697c;
--color-currant-violet-700: #675463;
--color-currant-violet-800: #4b3d4a;
--color-currant-violet-900: #342a33;
--color-currant-violet-950: #20181f;
}SCSS
$currant-violet: #553e51;
$currant-violet-rgb: 85, 62, 81;
$currant-violet-light: mix(#fff, $currant-violet, 20%);
$currant-violet-dark: mix(#000, $currant-violet, 20%);
.element {
color: $currant-violet;
box-shadow: 0 0 0 2px rgba($currant-violet, 0.35);
}