Named color · #FFEFD6
Blank Canvas
Blank Canvas is #FFEFD6: rgb(255 239 214), hsl(37 100% 92%), oklch(0.958 0.037 79.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Blank Canvas color name →
#FFEFD6
oklch(0.958 0.037 79.1)
Color conversions
- HEX
- #ffefd6
- RGB
- rgb(255 239 214)
- HSL
- hsl(37 100% 92%)
- HWB
- hwb(37 84% 0%)
- OKLCH
- oklch(0.958 0.037 79.1)
- OKLab
- oklab(0.958 0.007 0.036)
- CIE Lab
- lab(95.25 2.65 14.19)
- LCH
- lch(95.25 14.43 79.4)
- CMYK
- cmyk(0% 6% 16% 0%)
Tints · Shades · Tones
Tints
- FFF1DA
- FFF2DE
- FFF4E2
- FFF5E6
- FFF7EB
- FFF9EF
- FFFAF3
- FFFCF7
- FFFDFB
Shades
- DED0BA
- BEB19E
- 9E9484
- 80786A
- 635C52
- 48423B
- 2E2A25
- 161410
- 030302
Tones
- F2E3CD
- E4D8C4
- D7CCBC
- CAC1B3
- BEB6AA
- B1ABA2
- A4A099
- 989591
- 8C8B88
Color harmonies
Complementary +180°
- FFEFD6
Blank Canvas
- E9F2FF
≈ Moon White
Analogous -30° +30°
- FFEFD6
Blank Canvas
- FFEDE4
≈ Peach Breeze
- F3F4D8
≈ Praise the Sun
Triadic +120° +240°
- FFEFD6
Blank Canvas
- D5F9FB
≈ Fishious Rend
- FBEBFF
≈ Fairy Bubblegum Cloud
Split-complementary +150° +210°
- FFEFD6
Blank Canvas
- E1F5FF
≈ Glacial Day
- F0EFFF
≈ Foundation White
Tetradic +90° +180° +270°
- FFEFD6
Blank Canvas
- DAFAED
≈ Toxic Latte
- E9F2FF
≈ Moon White
- FFEBF4
≈ Fairy Wings
Contrast & accessibility
Ag
FailOn white
WCAG 1.13:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.56:1 · APCA Lc 99
Best text color: #000000
WCAG 18.56:1 (AAA) · APCA Lc 99
Contrast pairs
Code snippets
CSS
:root {
--blank-canvas: #ffefd6;
--blank-canvas-rgb: 255 239 214;
--blank-canvas-oklch: oklch(0.958 0.037 79.1);
}
.element {
color: var(--blank-canvas);
background-color: hsl(37 100% 92%);
border-color: oklch(0.958 0.037 79.1);
}Tailwind CSS v4
@theme {
--color-blank-canvas: #ffefd6;
--color-blank-canvas-50: #fbf4ea;
--color-blank-canvas-100: #eee7da;
--color-blank-canvas-200: #dcd3c3;
--color-blank-canvas-300: #c1b6a3;
--color-blank-canvas-400: #aa9c86;
--color-blank-canvas-500: #94846b;
--color-blank-canvas-600: #7d705b;
--color-blank-canvas-700: #645948;
--color-blank-canvas-800: #4a4134;
--color-blank-canvas-900: #332d23;
--color-blank-canvas-950: #1f1a12;
}SCSS
$blank-canvas: #ffefd6;
$blank-canvas-rgb: 255, 239, 214;
$blank-canvas-light: mix(#fff, $blank-canvas, 20%);
$blank-canvas-dark: mix(#000, $blank-canvas, 20%);
.element {
color: $blank-canvas;
box-shadow: 0 0 0 2px rgba($blank-canvas, 0.35);
}