Nazwany kolor · #E1BCD8
Designer Pink
Designer Pink to #E1BCD8: rgb(225 188 216), hsl(315 38% 81%), oklch(0.836 0.056 334.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Designer Pink color name →
#E1BCD8
oklch(0.836 0.056 334.7)
Konwersje koloru
- HEX
- #e1bcd8
- RGB
- rgb(225 188 216)
- HSL
- hsl(315 38% 81%)
- HWB
- hwb(315 74% 12%)
- OKLCH
- oklch(0.836 0.056 334.7)
- OKLab
- oklab(0.836 0.051 -0.024)
- CIE Lab
- lab(80.16 17.13 -8.88)
- LCH
- lch(80.16 19.29 332.6)
- CMYK
- cmyk(0% 16% 4% 12%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E4C3DC
- E7C9E0
- EAD0E4
- EDD7E8
- F0DDEB
- F3E4EF
- F6EBF3
- F9F1F7
- FCF8FB
Odcienie ciemniejsze
- C4A3BC
- A78BA0
- 8B7385
- 705D6B
- 564753
- 3E323B
- 271F25
- 120D11
- 020202
Tony
- D7B6CF
- CDB0C6
- C3AABD
- B9A4B4
- B09EAB
- A698A2
- 9C929A
- 938C91
- 898688
Harmonie kolorów
Komplementarna +180°
- E1BCD8
Designer Pink
- ADD4B9
≈ Enchanted Meadow
Analogowa -30° +30°
- E1BCD8
Designer Pink
- D1C1E7
≈ York Plum
- EABBC4
≈ Cat Nose
Triada +120° +240°
- E1BCD8
Designer Pink
- D4C9A0
≈ Hay
- A0D3E0
≈ Ocean Cruise
Komplementarna rozszczepiona +150° +210°
- E1BCD8
Designer Pink
- C1D0A8
≈ Landscape
- A0D6CE
≈ Touch of Turquoise
Tetrada +90° +180° +270°
- E1BCD8
Designer Pink
- E4C2A4
≈ Buttercup Yellow
- ADD4B9
≈ Enchanted Meadow
- ABCEEC
≈ Andromeda Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.69:1 · APCA Lc 30
Ag
AAANa czerni
WCAG 12.38:1 · APCA Lc 73
Najlepszy kolor tekstu: #000000
WCAG 12.38:1 (AAA) · APCA Lc 73
Contrast pairs
Fragmenty kodu
CSS
:root {
--designer-pink: #e1bcd8;
--designer-pink-rgb: 225 188 216;
--designer-pink-oklch: oklch(0.836 0.056 334.7);
}
.element {
color: var(--designer-pink);
background-color: hsl(315 38% 81%);
border-color: oklch(0.836 0.056 334.7);
}Tailwind CSS v4
@theme {
--color-designer-pink: #e1bcd8;
--color-designer-pink-50: #ffeffb;
--color-designer-pink-100: #f5e1ef;
--color-designer-pink-200: #e5ccdd;
--color-designer-pink-300: #cbadc2;
--color-designer-pink-400: #b492ac;
--color-designer-pink-500: #9e7895;
--color-designer-pink-600: #86667e;
--color-designer-pink-700: #6b5165;
--color-designer-pink-800: #4e3b4b;
--color-designer-pink-900: #372934;
--color-designer-pink-950: #21161f;
}SCSS
$designer-pink: #e1bcd8;
$designer-pink-rgb: 225, 188, 216;
$designer-pink-light: mix(#fff, $designer-pink, 20%);
$designer-pink-dark: mix(#000, $designer-pink, 20%);
.element {
color: $designer-pink;
box-shadow: 0 0 0 2px rgba($designer-pink, 0.35);
}