Nazwany kolor · #F4C2C2
Cor-de-Pele
Cor-de-Pele to #F4C2C2: rgb(244 194 194), hsl(0 69% 86%), oklch(0.858 0.057 18.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Cor-de-Pele color name →
#F4C2C2
oklch(0.858 0.057 18.3)
Konwersje koloru
- HEX
- #f4c2c2
- RGB
- rgb(244 194 194)
- HSL
- hsl(0 69% 86%)
- HWB
- hwb(0 76% 4%)
- OKLCH
- oklch(0.858 0.057 18.3)
- OKLab
- oklab(0.858 0.054 0.018)
- CIE Lab
- lab(82.95 18.41 7.18)
- LCH
- lch(82.95 19.76 21.3)
- CMYK
- cmyk(0% 20% 20% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5C8C8
- F7CECE
- F8D4D4
- F9DADA
- FAE0E0
- FBE7E6
- FCEDEC
- FDF3F3
- FEF9F9
Odcienie ciemniejsze
- D4A8A8
- B58F8F
- 977777
- 7A6060
- 5E4949
- 443434
- 2B2020
- 140E0E
- 030202
Tony
- E8BBBB
- DCB5B4
- D0AEAE
- C5A7A7
- B9A1A0
- AD9A9A
- A29393
- 978D8D
- 8B8686
Harmonie kolorów
Komplementarna +180°
- F4C2C2
Cor-de-Pele
- A4DDDE
≈ Aqua Spray
Analogowa -30° +30°
- F4C2C2
Cor-de-Pele
- EEC2D7
≈ Starlet Pink
- F1C6B0
≈ Peach Temptation
Triada +120° +240°
- F4C2C2
Cor-de-Pele
- BEDAB6
≈ Grasshopper Pie
- BAD2F7
≈ Frost Fairy
Komplementarna rozszczepiona +150° +210°
- F4C2C2
Cor-de-Pele
- ACDDC9
≈ Brook Green
- AAD9EE
≈ Blue Feather
Tetrada +90° +180° +270°
- F4C2C2
Cor-de-Pele
- D3D4A9
≈ Cream Cheese Avocado
- A4DDDE
≈ Aqua Spray
- CECBF5
≈ Soap
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.57:1 · APCA Lc 26
Ag
AAANa czerni
WCAG 13.34:1 · APCA Lc 77
Najlepszy kolor tekstu: #000000
WCAG 13.34:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--cor-de-pele: #f4c2c2;
--cor-de-pele-rgb: 244 194 194;
--cor-de-pele-oklch: oklch(0.858 0.057 18.3);
}
.element {
color: var(--cor-de-pele);
background-color: hsl(0 69% 86%);
border-color: oklch(0.858 0.057 18.3);
}Tailwind CSS v4
@theme {
--color-cor-de-pele: #f4c2c2;
--color-cor-de-pele-50: #ffefee;
--color-cor-de-pele-100: #fbe1e0;
--color-cor-de-pele-200: #eccbca;
--color-cor-de-pele-300: #d3acab;
--color-cor-de-pele-400: #be9191;
--color-cor-de-pele-500: #a97778;
--color-cor-de-pele-600: #8f6565;
--color-cor-de-pele-700: #735151;
--color-cor-de-pele-800: #553a3b;
--color-cor-de-pele-900: #3b2829;
--color-cor-de-pele-950: #251617;
}SCSS
$cor-de-pele: #f4c2c2;
$cor-de-pele-rgb: 244, 194, 194;
$cor-de-pele-light: mix(#fff, $cor-de-pele, 20%);
$cor-de-pele-dark: mix(#000, $cor-de-pele, 20%);
.element {
color: $cor-de-pele;
box-shadow: 0 0 0 2px rgba($cor-de-pele, 0.35);
}