Nazwany kolor · #E6AAC1
Little Princess
Little Princess to #E6AAC1: rgb(230 170 193), hsl(337 55% 78%), oklch(0.8 0.076 354.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Little Princess color name →
#E6AAC1
oklch(0.8 0.076 354.2)
Konwersje koloru
- HEX
- #e6aac1
- RGB
- rgb(230 170 193)
- HSL
- hsl(337 55% 78%)
- HWB
- hwb(337 67% 10%)
- OKLCH
- oklch(0.8 0.076 354.2)
- OKLab
- oklab(0.8 0.076 -0.008)
- CIE Lab
- lab(75.86 25.2 -2.68)
- LCH
- lch(75.86 25.34 353.9)
- CMYK
- cmyk(0% 26% 16% 10%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E9B2C7
- ECBBCD
- EFC3D3
- F1CCD9
- F4D4E0
- F6DDE6
- F9E5EC
- FBEEF2
- FDF6F9
Odcienie ciemniejsze
- C893A7
- AB7D8F
- 8E6877
- 73535F
- 593F49
- 402D34
- 281B20
- 130B0E
- 030102
Tony
- DCA6BA
- D1A2B4
- C79EAD
- BD99A6
- B395A0
- A89199
- 9E8D93
- 94888D
- 8A8486
Harmonie kolorów
Komplementarna +180°
- E6AAC1
Little Princess
- 89CEBA
≈ Blue Frosting
Analogowa -30° +30°
- E6AAC1
Little Princess
- D7AEDA
≈ Whisper of Plum
- EBABA6
≈ Soft Salmon
Triada +120° +240°
- E6AAC1
Little Princess
- BDC48B
≈ Misty Valley
- 8DC7E8
≈ Deluxe Days
Komplementarna rozszczepiona +150° +210°
- E6AAC1
Little Princess
- A0CB9F
≈ Gingko
- 81CDD4
≈ White Ultramarine
Tetrada +90° +180° +270°
- E6AAC1
Little Princess
- D5BA85
≈ Independent Gold
- 89CEBA
≈ Blue Frosting
- A5BEF0
≈ Sky High
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.92:1 · APCA Lc 37
Ag
AAANa czerni
WCAG 10.88:1 · APCA Lc 66
Najlepszy kolor tekstu: #000000
WCAG 10.88:1 (AAA) · APCA Lc 66
Contrast pairs
Fragmenty kodu
CSS
:root {
--little-princess: #e6aac1;
--little-princess-rgb: 230 170 193;
--little-princess-oklch: oklch(0.8 0.076 354.2);
}
.element {
color: var(--little-princess);
background-color: hsl(337 55% 78%);
border-color: oklch(0.8 0.076 354.2);
}Tailwind CSS v4
@theme {
--color-little-princess: #e6aac1;
--color-little-princess-50: #ffedf6;
--color-little-princess-100: #fedee8;
--color-little-princess-200: #f0c7d5;
--color-little-princess-300: #d8a8b8;
--color-little-princess-400: #c38ca1;
--color-little-princess-500: #ae7189;
--color-little-princess-600: #936074;
--color-little-princess-700: #764c5d;
--color-little-princess-800: #573745;
--color-little-princess-900: #3d2630;
--color-little-princess-950: #26141c;
}SCSS
$little-princess: #e6aac1;
$little-princess-rgb: 230, 170, 193;
$little-princess-light: mix(#fff, $little-princess, 20%);
$little-princess-dark: mix(#000, $little-princess, 20%);
.element {
color: $little-princess;
box-shadow: 0 0 0 2px rgba($little-princess, 0.35);
}