Nazwany kolor · #DD00EE
Piercing Pink
Piercing Pink to #DD00EE: rgb(221 0 238), hsl(296 100% 47%), oklch(0.64 0.3 324.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Piercing Pink color name →
#DD00EE
oklch(0.64 0.3 324.4)
Konwersje koloru
- HEX
- #dd00ee
- RGB
- rgb(221 0 238)
- HSL
- hsl(296 100% 47%)
- HWB
- hwb(296 0% 7%)
- OKLCH
- oklch(0.64 0.3 324.4)
- OKLab
- oklab(0.64 0.244 -0.175)
- CIE Lab
- lab(53.24 85.77 -62.5)
- LCH
- lch(53.24 106.13 323.9)
- CMYK
- cmyk(7% 100% 0% 7%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E240F1
- E85EF4
- EC77F6
- F08CF8
- F4A1FA
- F7B5FC
- FAC8FD
- FCDAFE
- FEEDFF
Odcienie ciemniejsze
- C000CF
- A400B1
- 880093
- 6E0077
- 55005C
- 3D0042
- 26002A
- 110014
- 020003
Tony
- D52EE3
- CC42D9
- C34FCE
- BB5AC3
- B263B8
- A86AAD
- 9F71A2
- 957797
- 8B7C8C
Harmonie kolorów
Komplementarna +180°
- DD00EE
Piercing Pink
- 00AA27
≈ Kobra Khan
Analogowa -30° +30°
- DD00EE
Piercing Pink
- 9867FF
≈ Purple Anemone
- F80096
≈ Neon Pink
Triada +120° +240°
- DD00EE
Piercing Pink
- B18400
≈ Chestnut Gold
- 009FAB
≈ Riviera
Komplementarna rozszczepiona +150° +210°
- DD00EE
Piercing Pink
- 8B9500
≈ Snakes in the Grass
- 00A487
≈ Congo Green
Tetrada +90° +180° +270°
- DD00EE
Piercing Pink
- D46C00
≈ Marmalade
- 00AA27
≈ Kobra Khan
- 0098D1
≈ Blithe
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.95:1 · APCA Lc 64
Ag
AANa czerni
WCAG 5.30:1 · APCA Lc 37
Najlepszy kolor tekstu: #000000
WCAG 5.30:1 (AA) · APCA Lc 37
Contrast pairs
Fragmenty kodu
CSS
:root {
--piercing-pink: #dd00ee;
--piercing-pink-rgb: 221 0 238;
--piercing-pink-oklch: oklch(0.64 0.3 324.4);
}
.element {
color: var(--piercing-pink);
background-color: hsl(296 100% 47%);
border-color: oklch(0.64 0.3 324.4);
}Tailwind CSS v4
@theme {
--color-piercing-pink: #dd00ee;
--color-piercing-pink-50: #ffd7ff;
--color-piercing-pink-100: #ffc4ff;
--color-piercing-pink-200: #ffa2ff;
--color-piercing-pink-300: #ff74ff;
--color-piercing-pink-400: #ee40fe;
--color-piercing-pink-500: #dd00f0;
--color-piercing-pink-600: #ba00cb;
--color-piercing-pink-700: #9600a3;
--color-piercing-pink-800: #6e007d;
--color-piercing-pink-900: #4e0058;
--color-piercing-pink-950: #33003c;
}SCSS
$piercing-pink: #dd00ee;
$piercing-pink-rgb: 221, 0, 238;
$piercing-pink-light: mix(#fff, $piercing-pink, 20%);
$piercing-pink-dark: mix(#000, $piercing-pink, 20%);
.element {
color: $piercing-pink;
box-shadow: 0 0 0 2px rgba($piercing-pink, 0.35);
}