Named color

Vellum

Vellum is a light orange color with HEX #EFE3C8. According to Colors Encyclopedia, it has RGB 239, 227, 200, HSL 42, 55%, 86%, warm temperature, and is useful for neutral systems, backgrounds, and editorial typography.

#EFE3C8 orange warm light

HEX #EFE3C8

RGB rgb(239, 227, 200)

HSL hsl(42 55% 86%)

CMYK cmyk(0, 5, 16, 6)

Luminance 0.7746

Contrast Black 16.49:1White 1.27:1

CSS Utilities

--color-vellum: #EFE3C8;
.bg-vellum { background-color: #EFE3C8; }
.text-vellum { color: #EFE3C8; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance0.7746

Black text16.49:1AA Pass

White text1.27:1AA Fail

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#EFE3C8",
  "rgb": [
    239,
    227,
    200
  ],
  "hsl": [
    42,
    55,
    86
  ],
  "cmyk": [
    0,
    5,
    16,
    6
  ],
  "luminance": 0.7746,
  "contrast": {
    "black": 16.49,
    "white": 1.27
  }
}

WCAG

{
  "AA": [
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "AAA": [
    "#000000",
    "#1A1A1A",
    "#36454F"
  ]
}

Harmonies

{
  "complementary": "#C8D3EF",
  "analogous": [
    "#EFD0C8",
    "#E7EFC8"
  ],
  "triadic": [
    "#C8EFE3",
    "#E3C8EF"
  ],
  "tetradic": [
    "#C8EFD0",
    "#C8D3EF",
    "#EFC8E7"
  ],
  "splitComplementary": [
    "#C8E7EF",
    "#D0C8EF"
  ],
  "monochromatic": [
    "#FFFFFF",
    "#EFE3C8",
    "#DABF81"
  ]
}

Variants

{
  "light": "#FFFFFF",
  "dark": "#DABF81",
  "saturated": "#F7E6C0",
  "desaturated": "#E7E0D0",
  "pastel": "#FFFFFF",
  "neon": "#FFF6E0"
}

Pairings

{
  "best": [
    "#000000",
    "#C8D3EF",
    "#EFD0C8",
    "#E7EFC8"
  ],
  "avoid": [
    "#E7E0D0",
    "#FFFFFF"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#FFFFFF",
    "#E7E0D0"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "pearl",
    "champagne",
    "parchment",
    "canvas",
    "bone"
  ],
  "generatedPalettes": [
    "vellum"
  ],
  "generatedComparisons": [
    "pearl-vs-vellum",
    "vellum-vs-champagne"
  ],
  "relatedFamilies": [
    "/colors/by-family/orange",
    "/colors/by-temperature/warm",
    "/colors/by-tone/light"
  ],
  "relatedTools": [
    "/harmonies/vellum",
    "/wcag/vellum",
    "/css/colors/vellum",
    "/hex/efe3c8"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/orange",
      "/colors/by-temperature/warm",
      "/colors/by-tone/light"
    ],
    "narrower": [
      "/palettes/vellum"
    ],
    "related": [
      "/colors/pearl",
      "/colors/champagne",
      "/colors/parchment",
      "/colors/canvas",
      "/colors/bone",
      "/compare/pearl-vs-vellum",
      "/compare/vellum-vs-champagne",
      "/harmonies/vellum",
      "/wcag/vellum",
      "/css/colors/vellum",
      "/hex/efe3c8"
    ]
  }
}

Full JSON dataset

{
  "slug": "vellum",
  "name": "Vellum",
  "hex": "#EFE3C8",
  "uses": [
    "neutral systems",
    "backgrounds",
    "editorial typography"
  ],
  "psychology": {
    "associations": [
      "quietness",
      "space",
      "balance"
    ],
    "contexts": [
      "UI surfaces",
      "interiors",
      "print-like layouts",
      "minimal branding"
    ],
    "avoidIn": [
      "high-visibility warning systems"
    ]
  },
  "aliases": [],
  "sourceType": "curated",
  "confidence": "medium",
  "reviewStatus": "manual",
  "sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
  "origin": {
    "type": "common",
    "notes": "Curated common color reference used in design, material, cultural, and editorial color systems."
  },
  "family": "orange",
  "temperature": "warm",
  "tone": [
    "light"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "orange",
    "warm",
    "light",
    "neutral-systems",
    "backgrounds",
    "editorial-typography",
    "quietness",
    "space",
    "balance"
  ],
  "popularity": 84,
  "rgb": [
    239,
    227,
    200
  ],
  "hsl": [
    42,
    55,
    86
  ],
  "cmyk": [
    0,
    5,
    16,
    6
  ],
  "luminance": 0.7746,
  "contrast": {
    "black": 16.49,
    "white": 1.27
  },
  "harmonies": {
    "complementary": "#C8D3EF",
    "analogous": [
      "#EFD0C8",
      "#E7EFC8"
    ],
    "triadic": [
      "#C8EFE3",
      "#E3C8EF"
    ],
    "tetradic": [
      "#C8EFD0",
      "#C8D3EF",
      "#EFC8E7"
    ],
    "splitComplementary": [
      "#C8E7EF",
      "#D0C8EF"
    ],
    "monochromatic": [
      "#FFFFFF",
      "#EFE3C8",
      "#DABF81"
    ]
  },
  "variants": {
    "light": "#FFFFFF",
    "dark": "#DABF81",
    "saturated": "#F7E6C0",
    "desaturated": "#E7E0D0",
    "pastel": "#FFFFFF",
    "neon": "#FFF6E0"
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ]
  },
  "css": {
    "variable": "--color-vellum: #EFE3C8;",
    "utility": ".bg-vellum { background-color: #EFE3C8; }",
    "textUtility": ".text-vellum { color: #EFE3C8; }"
  },
  "nearestColors": [
    "pearl",
    "champagne",
    "parchment",
    "canvas",
    "bone"
  ],
  "generatedPalettes": [
    "vellum"
  ],
  "generatedComparisons": [
    "pearl-vs-vellum",
    "vellum-vs-champagne"
  ],
  "relatedFamilies": [
    "/colors/by-family/orange",
    "/colors/by-temperature/warm",
    "/colors/by-tone/light"
  ],
  "relatedTools": [
    "/harmonies/vellum",
    "/wcag/vellum",
    "/css/colors/vellum",
    "/hex/efe3c8"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/orange",
      "/colors/by-temperature/warm",
      "/colors/by-tone/light"
    ],
    "narrower": [
      "/palettes/vellum"
    ],
    "related": [
      "/colors/pearl",
      "/colors/champagne",
      "/colors/parchment",
      "/colors/canvas",
      "/colors/bone",
      "/compare/pearl-vs-vellum",
      "/compare/vellum-vs-champagne",
      "/harmonies/vellum",
      "/wcag/vellum",
      "/css/colors/vellum",
      "/hex/efe3c8"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#C8D3EF",
      "#EFD0C8",
      "#E7EFC8"
    ],
    "avoid": [
      "#E7E0D0",
      "#FFFFFF"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#FFFFFF",
      "#E7E0D0"
    ]
  }
}

Color meaning and use

About Vellum Color

Vellum sits in the orange family with warm temperature and light visual character. Vellum is a commonly used color name in design references, palettes, and editorial color systems.

Its common associations include quietness, space, and balance, which makes it relevant for UI surfaces and interiors. In design work, Vellum is most useful for neutral systems, backgrounds, and editorial typography, especially when paired with black text for stronger contrast.

WCAG Accessibility

Contrast checks for Vellum against black and white text.

Black text16.49:1AA Pass

White text1.27:1AA Fail

AA text options#000000, #1A1A1A, #36454F

AAA text options#000000, #1A1A1A, #36454F

Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Similar Colors

Pearl#EAE0C8

Champagne#F7E7CE

Parchment#F1E9D2

Canvas#F4EBD0

Bone#E3DAC9

Color Harmonies

#C8D3EF#C8D3EF

#EFD0C8#EFD0C8

#E7EFC8#E7EFC8

#C8EFE3#C8EFE3

#E3C8EF#E3C8EF

Open full Vellum harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

White#FFFFFF

#DABF81#DABF81

#F7E6C0#F7E6C0

#E7E0D0#E7E0D0

White#FFFFFF

#FFF6E0#FFF6E0

Pairings

Black#000000

#C8D3EF#C8D3EF

#EFD0C8#EFD0C8

#E7EFC8#E7EFC8

Matte Black#1A1A1A

White Smoke#F5F5F5

Vellum

CSS Utilities

Machine-Readable Color Data (JSON)

About Vellum Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings