Named color · #FCFFF9
Ceramic
Ceramic is #FCFFF9: rgb(252 255 249), hsl(90 100% 99%), oklch(0.996 0.008 128.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Ceramic color name →
#FCFFF9
oklch(0.996 0.008 128.6)
Color conversions
- HEX
- #fcfff9
- RGB
- rgb(252 255 249)
- HSL
- hsl(90 100% 99%)
- HWB
- hwb(90 98% 0%)
- OKLCH
- oklch(0.996 0.008 128.6)
- OKLab
- oklab(0.996 -0.005 0.007)
- CIE Lab
- lab(99.65 -1.8 2.51)
- LCH
- lch(99.65 3.09 125.7)
- CMYK
- cmyk(1% 0% 2% 0%)
Tints · Shades · Tones
Tints
- FCFFFA
- FDFFFA
- FDFFFB
- FDFFFB
- FDFFFC
- FEFFFD
- FEFFFD
- FEFFFE
- FFFFFE
Shades
- DBDED9
- BBBEB9
- 9C9E9A
- 7E807D
- 626361
- 474846
- 2D2E2C
- 161615
- 030303
Tones
- EFF2EC
- E2E4E0
- D5D7D3
- C9CAC7
- BCBDBB
- B0B1AF
- A4A4A3
- 989897
- 8C8C8B
Color harmonies
Complementary +180°
- FCFFF9
Ceramic
- FEFDFF
≈ Pale Grey
Analogous -30° +30°
- FCFFF9
Ceramic
- FFFEF8
≈ Baby Powder
- FBFFFC
≈ Whitewash
Triadic +120° +240°
- FCFFF9
Ceramic
- FDFEFF
≈ White as Heaven
- FFFDFD
≈ Whitecap Snow
Split-complementary +150° +210°
- FCFFF9
Ceramic
- FDFEFF
≈ White as Heaven
- FFFDFE
≈ Whitecap Snow
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.00:1 · APCA Lc 0
Ag
AAAOn black
WCAG 20.81:1 · APCA Lc 107
Best text color: #000000
WCAG 20.81:1 (AAA) · APCA Lc 107
Contrast pairs
Code snippets
CSS
:root {
--ceramic: #fcfff9;
--ceramic-rgb: 252 255 249;
--ceramic-oklch: oklch(0.996 0.008 128.6);
}
.element {
color: var(--ceramic);
background-color: hsl(90 100% 99%);
border-color: oklch(0.996 0.008 128.6);
}Tailwind CSS v4
@theme {
--color-ceramic: #fcfff9;
--color-ceramic-50: #f4f6f3;
--color-ceramic-100: #e7e8e5;
--color-ceramic-200: #d3d5d1;
--color-ceramic-300: #b6b8b4;
--color-ceramic-400: #9d9f9a;
--color-ceramic-500: #848781;
--color-ceramic-600: #70726e;
--color-ceramic-700: #5a5c58;
--color-ceramic-800: #414340;
--color-ceramic-900: #2d2e2c;
--color-ceramic-950: #1a1b19;
}SCSS
$ceramic: #fcfff9;
$ceramic-rgb: 252, 255, 249;
$ceramic-light: mix(#fff, $ceramic, 20%);
$ceramic-dark: mix(#000, $ceramic, 20%);
.element {
color: $ceramic;
box-shadow: 0 0 0 2px rgba($ceramic, 0.35);
}