Nazwany kolor · #F4D9CB
Angelic Pink
Angelic Pink to #F4D9CB: rgb(244 217 203), hsl(20 65% 88%), oklch(0.904 0.036 49.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Angelic Pink color name →
#F4D9CB
oklch(0.904 0.036 49.2)
Konwersje koloru
- HEX
- #f4d9cb
- RGB
- rgb(244 217 203)
- HSL
- hsl(20 65% 88%)
- HWB
- hwb(20 80% 4%)
- OKLCH
- oklch(0.904 0.036 49.2)
- OKLab
- oklab(0.904 0.023 0.027)
- CIE Lab
- lab(88.68 8.03 10.52)
- LCH
- lch(88.68 13.23 52.6)
- CMYK
- cmyk(0% 11% 17% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5DDD0
- F6E1D5
- F8E4DA
- F9E8E0
- FAECE5
- FBF0EA
- FCF4EF
- FDF7F5
- FEFBFA
Odcienie ciemniejsze
- D4BCB0
- B5A196
- 97867D
- 7A6C65
- 5E534D
- 443B37
- 2B2522
- 14110F
- 030202
Tony
- E8D0C3
- DCC7BC
- D0BDB4
- C4B4AC
- B8ABA5
- ADA39D
- A29A96
- 96918F
- 8B8987
Harmonie kolorów
Komplementarna +180°
- F4D9CB
Angelic Pink
- C8E4F2
≈ Niagara Falls
Analogowa -30° +30°
- F4D9CB
Angelic Pink
- F6D6D6
≈ Redneck
- ECDDC5
≈ Nobility
Triada +120° +240°
- F4D9CB
Angelic Pink
- C9E7DB
≈ Misty Glen
- DEDCF6
≈ Nostalgia Perfume
Komplementarna rozszczepiona +150° +210°
- F4D9CB
Angelic Pink
- C5E7E8
≈ Pale Seafoam
- D2E0F8
≈ Puffy Cloud
Tetrada +90° +180° +270°
- F4D9CB
Angelic Pink
- D4E5CF
≈ Infinitesimal Green
- C8E4F2
≈ Niagara Falls
- EAD8EF
≈ Pouty Purple
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.34:1 · APCA Lc 17
Ag
AAANa czerni
WCAG 15.63:1 · APCA Lc 87
Najlepszy kolor tekstu: #000000
WCAG 15.63:1 (AAA) · APCA Lc 87
Contrast pairs
Fragmenty kodu
CSS
:root {
--angelic-pink: #f4d9cb;
--angelic-pink-rgb: 244 217 203;
--angelic-pink-oklch: oklch(0.904 0.036 49.2);
}
.element {
color: var(--angelic-pink);
background-color: hsl(20 65% 88%);
border-color: oklch(0.904 0.036 49.2);
}Tailwind CSS v4
@theme {
--color-angelic-pink: #f4d9cb;
--color-angelic-pink-50: #fef3ec;
--color-angelic-pink-100: #f2e5dd;
--color-angelic-pink-200: #e1d0c7;
--color-angelic-pink-300: #c7b3a7;
--color-angelic-pink-400: #b1998c;
--color-angelic-pink-500: #9a8072;
--color-angelic-pink-600: #836c60;
--color-angelic-pink-700: #69564d;
--color-angelic-pink-800: #4d3f38;
--color-angelic-pink-900: #362b26;
--color-angelic-pink-950: #211915;
}SCSS
$angelic-pink: #f4d9cb;
$angelic-pink-rgb: 244, 217, 203;
$angelic-pink-light: mix(#fff, $angelic-pink, 20%);
$angelic-pink-dark: mix(#000, $angelic-pink, 20%);
.element {
color: $angelic-pink;
box-shadow: 0 0 0 2px rgba($angelic-pink, 0.35);
}