Nazwany kolor · #E9B4C3
Athena Pink
Athena Pink to #E9B4C3: rgb(233 180 195), hsl(343 55% 81%), oklch(0.822 0.064 359.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Athena Pink color name →
#E9B4C3
oklch(0.822 0.064 359.9)
Konwersje koloru
- HEX
- #e9b4c3
- RGB
- rgb(233 180 195)
- HSL
- hsl(343 55% 81%)
- HWB
- hwb(343 71% 9%)
- OKLCH
- oklch(0.822 0.064 359.9)
- OKLab
- oklab(0.822 0.064 0)
- CIE Lab
- lab(78.55 21.47 0.18)
- LCH
- lch(78.55 21.47 0.5)
- CMYK
- cmyk(0% 23% 16% 9%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- ECBBC9
- EEC3CF
- F0CAD5
- F3D2DB
- F5D9E1
- F7E1E7
- F9E8ED
- FBF0F3
- FDF7F9
Odcienie ciemniejsze
- CB9CA9
- AD8590
- 906E78
- 745860
- 5A444A
- 413034
- 291D20
- 130C0E
- 030202
Tony
- DEAFBC
- D4AAB5
- C9A4AE
- BE9FA8
- B49AA1
- A9959A
- 9F9094
- 958A8D
- 8A8586
Harmonie kolorów
Komplementarna +180°
- E9B4C3
Athena Pink
- 97D3C6
≈ Opal Turquoise
Analogowa -30° +30°
- E9B4C3
Athena Pink
- DDB6D9
≈ French Lilac
- ECB6AC
≈ Pensive Pink
Triada +120° +240°
- E9B4C3
Athena Pink
- BFCB9D
≈ Seedling
- 9FCBEB
≈ Fail Whale
Komplementarna rozszczepiona +150° +210°
- E9B4C3
Athena Pink
- A8D1AF
≈ Coral Springs
- 93D1DC
≈ Foaming Surf
Tetrada +90° +180° +270°
- E9B4C3
Athena Pink
- D5C495
≈ Vast Escape
- 97D3C6
≈ Opal Turquoise
- B4C4EF
≈ Larkspur Bud
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.78:1 · APCA Lc 33
Ag
AAANa czerni
WCAG 11.78:1 · APCA Lc 70
Najlepszy kolor tekstu: #000000
WCAG 11.78:1 (AAA) · APCA Lc 70
Contrast pairs
Fragmenty kodu
CSS
:root {
--athena-pink: #e9b4c3;
--athena-pink-rgb: 233 180 195;
--athena-pink-oklch: oklch(0.822 0.064 359.9);
}
.element {
color: var(--athena-pink);
background-color: hsl(343 55% 81%);
border-color: oklch(0.822 0.064 359.9);
}Tailwind CSS v4
@theme {
--color-athena-pink: #e9b4c3;
--color-athena-pink-50: #ffeef4;
--color-athena-pink-100: #fcdfe6;
--color-athena-pink-200: #edc9d2;
--color-athena-pink-300: #d5aab5;
--color-athena-pink-400: #bf8f9d;
--color-athena-pink-500: #aa7484;
--color-athena-pink-600: #906370;
--color-athena-pink-700: #734f5a;
--color-athena-pink-800: #553942;
--color-athena-pink-900: #3b272e;
--color-athena-pink-950: #25151b;
}SCSS
$athena-pink: #e9b4c3;
$athena-pink-rgb: 233, 180, 195;
$athena-pink-light: mix(#fff, $athena-pink, 20%);
$athena-pink-dark: mix(#000, $athena-pink, 20%);
.element {
color: $athena-pink;
box-shadow: 0 0 0 2px rgba($athena-pink, 0.35);
}