Nazwany kolor · #F8C4C5
Icing on the Cake
Icing on the Cake to #F8C4C5: rgb(248 196 197), hsl(359 79% 87%), oklch(0.866 0.06 17.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Icing on the Cake color name →
#F8C4C5
oklch(0.866 0.06 17.1)
Konwersje koloru
- HEX
- #f8c4c5
- RGB
- rgb(248 196 197)
- HSL
- hsl(359 79% 87%)
- HWB
- hwb(359 77% 3%)
- OKLCH
- oklch(0.866 0.06 17.1)
- OKLab
- oklab(0.866 0.057 0.018)
- CIE Lab
- lab(83.88 19.22 6.97)
- LCH
- lch(83.88 20.45 19.9)
- CMYK
- cmyk(0% 21% 21% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F9CACB
- FAD0D0
- FBD6D6
- FCDCDC
- FCE1E2
- FDE7E8
- FEEDED
- FEF3F3
- FFF9F9
Odcienie ciemniejsze
- D8AAAB
- B89192
- 9A7879
- 7C6161
- 604A4B
- 453535
- 2C2121
- 150E0E
- 030202
Tony
- ECBDBE
- DFB6B7
- D3AFB0
- C7A8A9
- BBA2A2
- AF9B9B
- A39494
- 978D8D
- 8C8787
Harmonie kolorów
Komplementarna +180°
- F8C4C5
Icing on the Cake
- A5E0E1
≈ Blue Light
Analogowa -30° +30°
- F8C4C5
Icing on the Cake
- F2C4DB
≈ Sweetheart
- F5C8B2
≈ Bellini
Triada +120° +240°
- F8C4C5
Icing on the Cake
- C1DDB7
≈ Wisp Green
- BBD5FB
≈ Oh Boy!
Komplementarna rozszczepiona +150° +210°
- F8C4C5
Icing on the Cake
- AEE0CB
≈ Meristem
- AADCF2
≈ Van Gogh Blue
Tetrada +90° +180° +270°
- F8C4C5
Icing on the Cake
- D7D6A9
≈ Green Mesh
- A5E0E1
≈ Blue Light
- D0CEF9
≈ Lavender Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.53:1 · APCA Lc 25
Ag
AAANa czerni
WCAG 13.69:1 · APCA Lc 78
Najlepszy kolor tekstu: #000000
WCAG 13.69:1 (AAA) · APCA Lc 78
Contrast pairs
Fragmenty kodu
CSS
:root {
--icing-on-the-cake: #f8c4c5;
--icing-on-the-cake-rgb: 248 196 197;
--icing-on-the-cake-oklch: oklch(0.866 0.06 17.1);
}
.element {
color: var(--icing-on-the-cake);
background-color: hsl(359 79% 87%);
border-color: oklch(0.866 0.06 17.1);
}Tailwind CSS v4
@theme {
--color-icing-on-the-cake: #f8c4c5;
--color-icing-on-the-cake-50: #ffefee;
--color-icing-on-the-cake-100: #fbe0e0;
--color-icing-on-the-cake-200: #edcbca;
--color-icing-on-the-cake-300: #d4acab;
--color-icing-on-the-cake-400: #bf9192;
--color-icing-on-the-cake-500: #aa7678;
--color-icing-on-the-cake-600: #906466;
--color-icing-on-the-cake-700: #735051;
--color-icing-on-the-cake-800: #553a3c;
--color-icing-on-the-cake-900: #3b2829;
--color-icing-on-the-cake-950: #251617;
}SCSS
$icing-on-the-cake: #f8c4c5;
$icing-on-the-cake-rgb: 248, 196, 197;
$icing-on-the-cake-light: mix(#fff, $icing-on-the-cake, 20%);
$icing-on-the-cake-dark: mix(#000, $icing-on-the-cake, 20%);
.element {
color: $icing-on-the-cake;
box-shadow: 0 0 0 2px rgba($icing-on-the-cake, 0.35);
}