Najbliższy nazwany kolor · #AB5C8E
#AB5C8E
Najbliższy nazwany kolor: Purple Zergling
#AB5C8E (rgb(171 92 142), hsl(322 32% 52%), oklch(0.583 0.12 342.8)) jest najbliższy nazwanemu kolorowi Purple Zergling. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#AB5C8E
oklch(0.583 0.12 342.8)
Konwersje koloru
- HEX
- #ab5c8e
- RGB
- rgb(171 92 142)
- HSL
- hsl(322 32% 52%)
- HWB
- hwb(322 36% 33%)
- OKLCH
- oklch(0.583 0.12 342.8)
- OKLab
- oklab(0.583 0.115 -0.035)
- CIE Lab
- lab(49.95 37.73 -12.89)
- LCH
- lch(49.95 39.87 341.1)
- CMYK
- cmyk(0% 46% 17% 33%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B46C99
- BD7CA4
- C68CAF
- CF9CBA
- D7ACC5
- E0BDD1
- E8CDDC
- F0DDE8
- F7EEF3
Odcienie ciemniejsze
- 944F7B
- 7E4268
- 683656
- 542A44
- 401F34
- 2D1424
- 1B0A15
- 0B0307
- 010001
Tony
- A7608D
- A4648B
- A0688A
- 9C6C89
- 987087
- 937386
- 8F7684
- 8A7A83
- 857D81
Harmonie kolorów
Komplementarna +180°
- AB5C8E
Purple Zergling
- 189166
≈ Viridian
Analogowa -30° +30°
- AB5C8E
Purple Zergling
- 9464AE
≈ Empire Violet
- B75A67
≈ Pink Flame
Triada +120° +240°
- AB5C8E
Purple Zergling
- 897D09
≈ Olive
- 0088AA
≈ Tiny Bubbles
Komplementarna rozszczepiona +150° +210°
- AB5C8E
Purple Zergling
- 5E8A3A
≈ Hidden Paradise
- 008D8B
≈ Corfu Shallows
Tetrada +90° +180° +270°
- AB5C8E
Purple Zergling
- A66E0F
≈ Buckthorn Brown
- 189166
≈ Viridian
- 427EC0
≈ Tufts Blue
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.51:1 · APCA Lc 71
Ag
AANa czerni
WCAG 4.65:1 · APCA Lc 31
Najlepszy kolor tekstu: #000000
WCAG 4.65:1 (AA) · APCA Lc 31
Contrast pairs
Fragmenty kodu
CSS
:root {
--purple-zergling: #ab5c8e;
--purple-zergling-rgb: 171 92 142;
--purple-zergling-oklch: oklch(0.583 0.12 342.8);
}
.element {
color: var(--purple-zergling);
background-color: hsl(322 32% 52%);
border-color: oklch(0.583 0.12 342.8);
}Tailwind CSS v4
@theme {
--color-purple-zergling: #ab5c8e;
--color-purple-zergling-50: #ffe8fd;
--color-purple-zergling-100: #ffd9f1;
--color-purple-zergling-200: #fbc0e0;
--color-purple-zergling-300: #e49fc6;
--color-purple-zergling-400: #cf81b1;
--color-purple-zergling-500: #bb639b;
--color-purple-zergling-600: #9e5483;
--color-purple-zergling-700: #7f4369;
--color-purple-zergling-800: #5e304f;
--color-purple-zergling-900: #422137;
--color-purple-zergling-950: #2a1022;
}SCSS
$purple-zergling: #ab5c8e;
$purple-zergling-rgb: 171, 92, 142;
$purple-zergling-light: mix(#fff, $purple-zergling, 20%);
$purple-zergling-dark: mix(#000, $purple-zergling, 20%);
.element {
color: $purple-zergling;
box-shadow: 0 0 0 2px rgba($purple-zergling, 0.35);
}