#DDE488

Accessibility

AAA

15.53:1

Vs white / black

1.35:1 · 15.53:1

Sources

Library color

Codes

Formats

HEX

#dde488

RGB

rgb(221, 228, 136)

RGBA

rgba(221, 228, 136, 1)

HSL

hsl(65, 63%, 71%)

HSLA

hsla(65, 63%, 71%, 1)

HSV

hsv(65, 40%, 89%)

LAB

lab(88.27% -15.81 44.04)

LCH

lch(88.27% 46.79 109.75)

OKLAB

oklab(0.8934 -0.0438 0.107)

OKLCH

oklch(0.8934 0.1156 112.26)

XYZ

xyz(62.01, 72.64, 34.04)

CMYK

cmyk(3%, 0%, 40%, 11%)

CSS

color: #dde488;

CSS variable

--color-dde488: #dde488;

SCSS

$color-dde488: #dde488;

JavaScript

const color = "#dde488";

TypeScript

const color: string = "#dde488";

React

style={{ backgroundColor: "#dde488" }}

JSON

{ "hex": "#dde488", "rgb": { "r": 221, "g": 228, "b": 136 }, "oklch": "oklch(0.8934 0.1156 112.26)" }

Export

Developer code

css

:root {
  --#dde488-1: #dde488;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

yellow-200

Very different · ΔE 6.63 · #FEF08A

Nearest CSS named color

Khaki

Noticeably different · ΔE 4.57 · #F0E68C

Nearest Material color

lime-200

Noticeably different · ΔE 2.9 · #E6EE9C

Nearest Bootstrap color

warning

Very different · ΔE 19.92 · #FFC107

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50f5fbc4 100e8eeb3 200d5db96 300bfc575 400a3a94d 500888d2f 600727625 7005b5e19 80045470d 900303203 9501b1d00

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

fcfdf5 f9fbeb f7f8e1 f4f6d7 f1f4cd eef2c4 ebefba e8edb0 e6eba6 e3e99c e0e692 dde488 cbd17d b8be71 a6ab66 93985b 81854f 6f7244 5c5f39 4a4c2d 373922 252617 12130b

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fcfdf5 f9fbeb f7f8e1 f4f6d7 f1f4cd eef2c4 ebefba e8edb0 e6eba6 e3e99c e0e692

Palette

Shades

Mixed toward black — depth, text, and emphasis

cbd17d b8be71 a6ab66 93985b 81854f 6f7244 5c5f39 4a4c2d 373922 252617 12130b

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

d5dc87 ced387 c6cb86 bec385 b6ba85 afb284 a7aa83 9fa183 979982 909181 888881

Harmony

Complementary

Opposite on the color wheel for contrast

#DDE488Stop 1 #8E86E4Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#E4BD86Stop 1 #DDE488Stop 2 #ADE486Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#DDE488Stop 1 #86DCE4Stop 2 #E486DCStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#DDE488Stop 1 #86ADE4Stop 2 #BD86E4Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#4E5313Stop 1 #889121Stop 2 #C2D02FStop 3 #D5DE6EStop 4 #E7ECACStop 5

Using this color

Where #dde488 works

#DDE488 (#dde488) sits in the yellow family at about 65° hue, 63% saturation, and 71% lightness. Contrast is 1.35:1 on white and 15.53:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: yellow-200 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on charcoal / dark mode

Do not use #dde488 as small body text on white — 1.35:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Optimism, attention, and warmth. Ideal for highlights, warnings, and cheerful brands. Common uses still include buttons, charts, and accents in the Yellow range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Spectrum #D1D978#D1D978 Material Lime 200#E6EE9C Material Lime 300#DCE775 Spectrum #DDDD73#DDDD73 Spectrum #D1E576#D1E576 Spectrum #DBE972#DBE972 Khaki#F0E68C Spectrum #C4D378#C4D378 Spectrum #E2DA6F#E2DA6F Spectrum #C4E076#C4E076 Spectrum #D7D693#D7D693 Spectrum #E9ED6E#E9ED6E