Nearest named color · #F9F3E0
#F9F3E0
Nearest named color: Painter’s Canvas
#F9F3E0 (rgb(249 243 224), hsl(46 68% 93%), oklch(0.964 0.026 92.4)) is closest to the named color Painter’s Canvas. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F9F3E0
oklch(0.964 0.026 92.4)
Color conversions
- HEX
- #f9f3e0
- RGB
- rgb(249 243 224)
- HSL
- hsl(46 68% 93%)
- HWB
- hwb(46 88% 2%)
- OKLCH
- oklch(0.964 0.026 92.4)
- OKLab
- oklab(0.964 -0.001 0.026)
- CIE Lab
- lab(95.93 -0.27 9.95)
- LCH
- lch(95.93 9.95 91.6)
- CMYK
- cmyk(0% 2% 10% 2%)
Tints · Shades · Tones
Tints
- FAF4E3
- FAF5E6
- FBF7E9
- FBF8EC
- FCF9F0
- FDFAF3
- FDFBF6
- FEFDF9
- FEFEFC
Shades
- D9D3C3
- B9B4A6
- 9A978A
- 7D7A70
- 615E56
- 46443E
- 2C2B27
- 151412
- 030302
Tones
- ECE7D6
- E0DBCC
- D3CFC2
- C7C3B9
- BBB8AF
- AFACA5
- A3A19C
- 979692
- 8B8B89
Color harmonies
Complementary +180°
- F9F3E0
Painter’s Canvas
- EFF3FF
≈ Placebo Blue
Analogous -30° +30°
- F9F3E0
Painter’s Canvas
- FFF0E4
≈ Rice Pudding
- F0F6E3
≈ Panache
Triadic +120° +240°
- F9F3E0
Painter’s Canvas
- E0F8FD
≈ Glacial Day
- FEEDFB
≈ Partial Pink
Split-complementary +150° +210°
- F9F3E0
Painter’s Canvas
- E9F5FF
≈ Moon White
- F5F0FF
≈ Cloud Break
Tetradic +90° +180° +270°
- F9F3E0
Painter’s Canvas
- E1F9F4
≈ Frosty Mint
- EFF3FF
≈ Placebo Blue
- FFEEF2
≈ Sugar Coated
Contrast & accessibility
Ag
FailOn white
WCAG 1.10:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.92:1 · APCA Lc 100
Best text color: #000000
WCAG 18.92:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--painter-s-canvas: #f9f3e0;
--painter-s-canvas-rgb: 249 243 224;
--painter-s-canvas-oklch: oklch(0.964 0.026 92.4);
}
.element {
color: var(--painter-s-canvas);
background-color: hsl(46 68% 93%);
border-color: oklch(0.964 0.026 92.4);
}Tailwind CSS v4
@theme {
--color-painter-s-canvas: #f9f3e0;
--color-painter-s-canvas-50: #f7f5ed;
--color-painter-s-canvas-100: #eae8de;
--color-painter-s-canvas-200: #d8d4c8;
--color-painter-s-canvas-300: #bbb7a9;
--color-painter-s-canvas-400: #a49e8e;
--color-painter-s-canvas-500: #8c8673;
--color-painter-s-canvas-600: #767162;
--color-painter-s-canvas-700: #5f5b4e;
--color-painter-s-canvas-800: #464238;
--color-painter-s-canvas-900: #302e27;
--color-painter-s-canvas-950: #1c1a15;
}SCSS
$painter-s-canvas: #f9f3e0;
$painter-s-canvas-rgb: 249, 243, 224;
$painter-s-canvas-light: mix(#fff, $painter-s-canvas, 20%);
$painter-s-canvas-dark: mix(#000, $painter-s-canvas, 20%);
.element {
color: $painter-s-canvas;
box-shadow: 0 0 0 2px rgba($painter-s-canvas, 0.35);
}