Nazwany kolor · #F4C1C1
Princess Bride
Princess Bride to #F4C1C1: rgb(244 193 193), hsl(0 70% 86%), oklch(0.856 0.059 18.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Princess Bride color name →
#F4C1C1
oklch(0.856 0.059 18.4)
Konwersje koloru
- HEX
- #f4c1c1
- RGB
- rgb(244 193 193)
- HSL
- hsl(0 70% 86%)
- HWB
- hwb(0 76% 4%)
- OKLCH
- oklch(0.856 0.059 18.4)
- OKLab
- oklab(0.856 0.056 0.018)
- CIE Lab
- lab(82.7 18.8 7.35)
- LCH
- lch(82.7 20.18 21.3)
- CMYK
- cmyk(0% 21% 21% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5C7C7
- F7CDCD
- F8D4D3
- F9DAD9
- FAE0E0
- FCE6E6
- FDECEC
- FDF3F2
- FEF9F9
Odcienie ciemniejsze
- D4A7A7
- B58F8F
- 977777
- 7A5F5F
- 5E4949
- 443434
- 2B2020
- 140E0E
- 030202
Tony
- E8BABA
- DCB4B4
- D0ADAD
- C5A7A6
- B9A0A0
- AD9A99
- A29393
- 978D8D
- 8B8686
Harmonie kolorów
Komplementarna +180°
- F4C1C1
Princess Bride
- A3DCDE
≈ Aqua Spray
Analogowa -30° +30°
- F4C1C1
Princess Bride
- EEC1D6
≈ Parrot Tulip
- F1C5AF
≈ Peach Temptation
Triada +120° +240°
- F4C1C1
Princess Bride
- BDD9B4
≈ Meadow Grass
- B9D1F7
≈ Frost Fairy
Komplementarna rozszczepiona +150° +210°
- F4C1C1
Princess Bride
- ABDDC9
≈ Brook Green
- A8D8EE
≈ Blue Bubble
Tetrada +90° +180° +270°
- F4C1C1
Princess Bride
- D3D3A7
≈ Cream Cheese Avocado
- A3DCDE
≈ Aqua Spray
- CDCAF5
≈ Soap
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.58:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 13.24:1 · APCA Lc 76
Najlepszy kolor tekstu: #000000
WCAG 13.24:1 (AAA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--princess-bride: #f4c1c1;
--princess-bride-rgb: 244 193 193;
--princess-bride-oklch: oklch(0.856 0.059 18.4);
}
.element {
color: var(--princess-bride);
background-color: hsl(0 70% 86%);
border-color: oklch(0.856 0.059 18.4);
}Tailwind CSS v4
@theme {
--color-princess-bride: #f4c1c1;
--color-princess-bride-50: #ffefee;
--color-princess-bride-100: #fbe1e0;
--color-princess-bride-200: #edcbca;
--color-princess-bride-300: #d4acab;
--color-princess-bride-400: #bf9191;
--color-princess-bride-500: #aa7777;
--color-princess-bride-600: #8f6565;
--color-princess-bride-700: #735051;
--color-princess-bride-800: #553a3b;
--color-princess-bride-900: #3b2829;
--color-princess-bride-950: #251617;
}SCSS
$princess-bride: #f4c1c1;
$princess-bride-rgb: 244, 193, 193;
$princess-bride-light: mix(#fff, $princess-bride, 20%);
$princess-bride-dark: mix(#000, $princess-bride, 20%);
.element {
color: $princess-bride;
box-shadow: 0 0 0 2px rgba($princess-bride, 0.35);
}