Benoemde kleur · #FDC3C6
Crystal Rose
Crystal Rose is #FDC3C6: rgb(253 195 198), hsl(357 94% 88%), oklch(0.87 0.067 15.1). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Pink mean? → · Crystal Rose color name →
#FDC3C6
oklch(0.87 0.067 15.1)
Kleurconversies
- HEX
- #fdc3c6
- RGB
- rgb(253 195 198)
- HSL
- hsl(357 94% 88%)
- HWB
- hwb(357 76% 1%)
- OKLCH
- oklch(0.87 0.067 15.1)
- OKLab
- oklab(0.87 0.064 0.017)
- CIE Lab
- lab(84.17 21.68 6.93)
- LCH
- lch(84.17 22.76 17.7)
- CMYK
- cmyk(0% 23% 22% 1%)
Tinten · Schaduwen · Tonen
Tinten
- FEC9CC
- FECFD1
- FFD5D7
- FFDBDD
- FFE1E2
- FFE7E8
- FFEDEE
- FFF3F3
- FFF9F9
Schaduwen
- DCA9AC
- BC9092
- 9D787A
- 7F6062
- 624A4B
- 473435
- 2D2021
- 160E0E
- 030202
Tonen
- F0BCBF
- E3B5B8
- D7AFB0
- CAA8A9
- BDA1A2
- B19A9B
- A59494
- 988D8E
- 8C8787
Kleurharmonieën
Complementair +180°
- FDC3C6
Crystal Rose
- A0E2E2
≈ Everest
Analoog -30° +30°
- FDC3C6
Crystal Rose
- F5C3DE
≈ Miami Pink
- FBC7B0
≈ Malibu Peach
Triadisch +120° +240°
- FDC3C6
Crystal Rose
- C2DFB3
≈ Graceful Flower
- B8D7FF
≈ Oh Boy!
Gesplitst complementair +150° +210°
- FDC3C6
Crystal Rose
- ABE3C9
≈ Fabulous Find
- A5DEF5
≈ Van Gogh Blue
Tetradisch +90° +180° +270°
- FDC3C6
Crystal Rose
- DAD7A5
≈ Sunlit Leaf
- A0E2E2
≈ Everest
- CFCFFF
≈ Lavender Blue
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.52:1 · APCA Lc 24
Ag
AAAOp zwart
WCAG 13.79:1 · APCA Lc 79
Beste tekstkleur: #000000
WCAG 13.79:1 (AAA) · APCA Lc 79
Contrast pairs
Codefragmenten
CSS
:root {
--crystal-rose: #fdc3c6;
--crystal-rose-rgb: 253 195 198;
--crystal-rose-oklch: oklch(0.87 0.067 15.1);
}
.element {
color: var(--crystal-rose);
background-color: hsl(357 94% 88%);
border-color: oklch(0.87 0.067 15.1);
}Tailwind CSS v4
@theme {
--color-crystal-rose: #fdc3c6;
--color-crystal-rose-50: #ffeeee;
--color-crystal-rose-100: #fee0e0;
--color-crystal-rose-200: #f0c9ca;
--color-crystal-rose-300: #d8aaab;
--color-crystal-rose-400: #c38f92;
--color-crystal-rose-500: #ae7478;
--color-crystal-rose-600: #936266;
--color-crystal-rose-700: #764f51;
--color-crystal-rose-800: #57393c;
--color-crystal-rose-900: #3d2729;
--color-crystal-rose-950: #261517;
}SCSS
$crystal-rose: #fdc3c6;
$crystal-rose-rgb: 253, 195, 198;
$crystal-rose-light: mix(#fff, $crystal-rose, 20%);
$crystal-rose-dark: mix(#000, $crystal-rose, 20%);
.element {
color: $crystal-rose;
box-shadow: 0 0 0 2px rgba($crystal-rose, 0.35);
}