#E8F3CA Pale Lime

Q: What color is #E8F3CA?

Pale Lime is #E8F3CA, or #E8F3CA in uppercase notation. In RGB it is rgb(232,243,202), in HSL about hsl(76 63% 87%), and in OKLCH oklch(0.945 0.055 119.7).

Q: What does Pale Lime symbolize?

It usually stands for energy, warmth and confidence, with a ceremonial edge. Local culture can shift that reading, so check the context.

Q: Where is Pale Lime used?

You will see it in Campaign landing pages, Editorial cover systems, Product packaging labels, Dashboard status accents, Retail wayfinding signs. It also appears across healthcare, finance, agriculture, outdoor.

Q: Which colors go well with Pale Lime?

Muted neutrals, deeper steps of the same hue and one metallic accent work well. editorial layouts that need one warm focal point; packaging that should feel appetizing without shouting; interfaces where an accent has to stay legible

Q: How does Pale Lime affect mood?

It raises perceived energy and draws the eye quickly. Large fields feel intense, so accent use is safer.

Q: Which industries use Pale Lime?

It is common in healthcare, finance, agriculture, outdoor, particularly where brands want to feel fresh, balanced, healthy, grounded, calm.

Q: What is the history of Pale Lime?

The pigment story is concrete: Green borrows its authority from foliage and renewal, moving easily from medical clean to deep forest calm. It reads as balance because the eye resolves it without strain.

Q: How should I use Pale Lime in design?

Give it one focal element, keep body copy neutral and confirm contrast at 1.16 against white and 16.28 against black.

Q: Is Pale Lime accessible?

Contrast is 1.16 against white (FAIL) and 16.28 against black (AAA). Use it for large text when the level reaches AA.

Color conversion

CMYK profile: Coated FOGRA39 · Formats follow CSS Color 4 naming and WCAG 2.2 contrast rules.

At a glance

Name	Pale Lime
Romanization	Pale Lime
Tradition	digital color
Family	Green
HEX	#E8F3CA
RGB	rgb(232,243,202)
HSL	hsl(76 63% 87%)
HSV	hsv(76, 17%, 95%)
OKLCH	oklch(0.945 0.055 119.7)
LAB	lab(94.11 -10.54 18.58)
XYZ	76,86,68
CMYK	cmyk(4.5% 0.0% 16.9% 4.7%)
RAL	#EFEBDC · Cream · RAL 9001

About this color

Pale LimeGreendigital color

Growth with a steady pulse

Pale Lime is #E8F3CA, a Green tone with a clear cultural lineage. Read on its own it belongs to the Green family; read through its digital color roots, it carries a second layer of meaning.

Design tip

Test Pale Lime (#E8F3CA) on a neutral surface first; a Green accent then looks intentional rather than decorative.

Best use

Give Pale Lime the single element that must be noticed first, and let the rest of the Green palette support it.

freshbalancedhealthygroundedcalm

Psychology

How it is perceived

freshbalancedhealthygroundedcalm

Psychological effect

Pale Lime raises the perceived energy of a Green composition and pulls the eye toward action.

Emotional impact

It feels immediate and warm, so it can lift a restrained layout without making it loud.

Symbolism

What it stands for

growthhealth and sustainability

Cultural significance

In digital color settings the shade carries local references, so verify its symbolism before a campaign.

Positive associations

Positive associations lean toward growth, health and sustainability, which is why it appears in invitations and seasonal work.

Use with care

Too much surface area can read as envy or dullness when desaturated too far, so keep it to accents and small fields.

Where it appears

Common design applications

Campaign landing pages: Give Pale Lime the single element that must be noticed first, and let the rest of the Green palette support it.
Editorial cover systems: Give Pale Lime the single element that must be noticed first, and let the rest of the Green palette support it.
Product packaging labels: Give Pale Lime the single element that must be noticed first, and let the rest of the Green palette support it.
Dashboard status accents: Give Pale Lime the single element that must be noticed first, and let the rest of the Green palette support it.
Retail wayfinding signs: Give Pale Lime the single element that must be noticed first, and let the rest of the Green palette support it.

Design guidance

How to make it work

Keep saturated fills below about twenty percent of the layout.
Use it for the primary call to action and nothing else.
Check the pairing at small sizes on a neutral background.

Avoid

Do not place it beside clashing neon greens or electric blues.
Never use it for long body text on white.
Avoid gradients that shift its hue into another family.

Brand fit

healthcare, finance, agriculture, outdoor

Brands built on The Caregiver, The Sage use it to signal character before they say a word.

Trend signal

Growth with a steady pulse

Green borrows its authority from foliage and renewal, moving easily from medical clean to deep forest calm. It reads as balance because the eye resolves it without strain.

Pairing

Colors that complete it

#F2E5FFeditorial layouts that need one warm focal point #AEB891interfaces where an accent has to stay legible #CCF3FFpackaging that should feel appetizing without shouting

History

Pigments and provenance

Before synthetic dyes, Pale Lime was matched with mineral and plant pigments, and the Green family depended on sources such as ochre, madder and indigo. Screens now reproduce it more consistently than any single pigment ever could.

Variations

Shades darken and tints lighten while the hue angle stays fixed.

Pro tip: Shades darken and tints lighten while the hue angle stays fixed.

Shades

Darker steps built from the same hue.

0% #E8F3CA 10% #D1DBB6 20% #BAC2A2 30% #A2AA8D 40% #8B9279 50% #747A65 60% #5D6151 70% #46493D 80% #2E3128 90% #171814 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #E8F3CA 10% #EAF4CF 20% #EDF5D5 30% #EFF7DA 40% #F1F8DF 50% #F4F9E5 60% #F6FAEA 70% #F8FBEF 80% #FAFDF4 90% #FDFEFA 100% #FFFFFF

Design scale 50–950

50#F4F7EC 100#EAF0DD 200#D6DDC3 300#BEC7A7 400#A5AE8A 500#86906A 600#6F7854 700#596041 800#434A2F 900#2F341F 950#1F2213

Dark-mode value (AA): #79825D · 4.63:1

Use cases

Shades → hover, shadows, depth
Tints → highlights, surfaces
Balance → consistent color systems

Design tip

Keep one dominant tone, one supporter and one accent.

Across color systems

The closest named color in each tradition and design system, measured in OKLCH ΔE. Lower means closer.

Asian color traditions

Putih ID ΔE 0.032

桜色 JP ΔE 0.034

月白 CN ΔE 0.043

Show all (6)

Цагаан MN ΔE 0.044

白云 TB ΔE 0.044

백 KR ΔE 0.057

Trắng VN ΔE 0.057

สีเหลือง TH ΔE 0.133

पीला IN ΔE 0.144

Design systems

Green 100 Open Color ΔE 0.004

Orange 100 Chakra ΔE 0.005

Emerald 100 Tailwind ΔE 0.006

Show all (11)

Emerald 100 UnoCSS ΔE 0.007

Emerald 100 Panda ΔE 0.007

Teal 4 Polaris ΔE 0.008

Orange 2 Ant Design ΔE 0.013

Mint 4 Radix ΔE 0.014

Teams V2.1 160 Fluent ΔE 0.026

Accent muted Primer ΔE 0.028

Tertiary 90 Material ΔE 0.030

Gray 200 Bootstrap ΔE 0.050

Background StyleX ΔE 0.078

Brand (alternate) vanilla-extract ΔE 0.081

RAL Classic

Cream · RAL 9001 RAL ΔE 0.035

Try any color

Color combinations

Rotate the hue wheel while holding lightness steady.

How to use it

Three moves keep the color readable and deliberate.

Why it works

The perceptual reasoning behind the palette.

Complementary

Opposite the hue wheel; it sharpens the focal color by contrast.

#E8F3CA #F2E5FF

Best use: Calls to action and single-feature highlights

Split-complementary

Two neighbors of the opposite hue; softer than a direct complement.

#E8F3CA #DEECFF #FFE0FF

Best use: Balanced marketing layouts with two accents

Triadic

Three hues spaced evenly; lively but needs one dominant voice.

#E8F3CA #CCF3FF #FFDEEC

Best use: Event identities and playful editorial spreads

Analogous

Neighbors on the wheel; quiet, cohesive and easy to scan.

#FBECC4 #E8F3CA #D4F8DA

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#A7AF91 #E8F3CA #EEF6D9

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#E8F3CA #C6FAEE #F2E5FF #FFDEEC

Best use: Complex dashboards and multi-service brands

Export the scale

CSS

:root {
  --brand-50: #F4F7EC;
  --brand-100: #EAF0DD;
  --brand-200: #D6DDC3;
  --brand-300: #BEC7A7;
  --brand-400: #A5AE8A;
  --brand-500: #86906A;
  --brand-600: #6F7854;
  --brand-700: #596041;
  --brand-800: #434A2F;
  --brand-900: #2F341F;
  --brand-950: #1F2213;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F4F7EC',
        100: '#EAF0DD',
        200: '#D6DDC3',
        300: '#BEC7A7',
        400: '#A5AE8A',
        500: '#86906A',
        600: '#6F7854',
        700: '#596041',
        800: '#434A2F',
        900: '#2F341F',
        950: '#1F2213',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F4F7EC"
    },
    "100": {
      "$type": "color",
      "$value": "#EAF0DD"
    },
    "200": {
      "$type": "color",
      "$value": "#D6DDC3"
    },
    "300": {
      "$type": "color",
      "$value": "#BEC7A7"
    },
    "400": {
      "$type": "color",
      "$value": "#A5AE8A"
    },
    "500": {
      "$type": "color",
      "$value": "#86906A"
    },
    "600": {
      "$type": "color",
      "$value": "#6F7854"
    },
    "700": {
      "$type": "color",
      "$value": "#596041"
    },
    "800": {
      "$type": "color",
      "$value": "#434A2F"
    },
    "900": {
      "$type": "color",
      "$value": "#2F341F"
    },
    "950": {
      "$type": "color",
      "$value": "#1F2213"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F4F7EC"/>
  <rect x="100" y="0" width="100" height="90" fill="#EAF0DD"/>
  <rect x="200" y="0" width="100" height="90" fill="#D6DDC3"/>
  <rect x="300" y="0" width="100" height="90" fill="#BEC7A7"/>
  <rect x="400" y="0" width="100" height="90" fill="#A5AE8A"/>
  <rect x="500" y="0" width="100" height="90" fill="#86906A"/>
  <rect x="600" y="0" width="100" height="90" fill="#6F7854"/>
  <rect x="700" y="0" width="100" height="90" fill="#596041"/>
  <rect x="800" y="0" width="100" height="90" fill="#434A2F"/>
  <rect x="900" y="0" width="100" height="90" fill="#2F341F"/>
  <rect x="1000" y="0" width="100" height="90" fill="#1F2213"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 0.957, green: 0.969, blue: 0.925, alpha: 1.0)
  static let brand100 = UIColor(red: 0.918, green: 0.941, blue: 0.867, alpha: 1.0)
  static let brand200 = UIColor(red: 0.839, green: 0.867, blue: 0.765, alpha: 1.0)
  static let brand300 = UIColor(red: 0.745, green: 0.780, blue: 0.655, alpha: 1.0)
  static let brand400 = UIColor(red: 0.647, green: 0.682, blue: 0.541, alpha: 1.0)
  static let brand500 = UIColor(red: 0.525, green: 0.565, blue: 0.416, alpha: 1.0)
  static let brand600 = UIColor(red: 0.435, green: 0.471, blue: 0.329, alpha: 1.0)
  static let brand700 = UIColor(red: 0.349, green: 0.376, blue: 0.255, alpha: 1.0)
  static let brand800 = UIColor(red: 0.263, green: 0.290, blue: 0.184, alpha: 1.0)
  static let brand900 = UIColor(red: 0.184, green: 0.204, blue: 0.122, alpha: 1.0)
  static let brand950 = UIColor(red: 0.122, green: 0.133, blue: 0.075, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F4F7EC</color>
  <color name="brand_100">#EAF0DD</color>
  <color name="brand_200">#D6DDC3</color>
  <color name="brand_300">#BEC7A7</color>
  <color name="brand_400">#A5AE8A</color>
  <color name="brand_500">#86906A</color>
  <color name="brand_600">#6F7854</color>
  <color name="brand_700">#596041</color>
  <color name="brand_800">#434A2F</color>
  <color name="brand_900">#2F341F</color>
  <color name="brand_950">#1F2213</color>
</resources>

Principles

Balance

Keep one dominant tone, one supporter and one accent.

Contrast

Test body text against both white and black before shipping.

Harmony

Rotate the hue wheel while holding lightness steady.

Color contrast checker

Test body text against both white and black before shipping.

Text color

Background

1.16 :1

FAIL

Quote

Give Pale Lime the single element that must be noticed first, and let the rest of the Green palette support it.

WCAG contrast

Preview

Aa / Bb

#E8F3CA · Pale Lime

WCAG contrast standards

WCAG 2.2 sets minimum contrast for text and interface parts. #E8F3CA measures 1.16:1 against white (FAIL) and 16.28:1 against black (AAA). Use the table below to choose the right threshold for the text size.

Level	Normal text	Large text (18pt+ / 14pt bold)	Icons & UI parts
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Fails	< 4.5 : 1	< 3 : 1	< 3 : 1

Large text means 18pt regular or 14pt bold. UI parts need 3:1 against adjacent colors. AA is the common compliance baseline; AAA is enhanced.

Technical formats

Notation across color spaces

HEX

#E8F3CA

CSS Color 4

RGB

232,243,202

sRGB / D65

HSL

76,63,87

HSL

OKLCH

oklch(0.945 0.055 119.7)

perceptual

LAB

94,-11,19

CIE Lab

LCH

94,21,120

CIE LCH

XYZ

76,86,68

CIE XYZ

LUV

94,-4,29

CIE LUV

HWB

76,79,5

CSS HWB

CMYK

5,0,17,5

Practical formats

Ready-to-use values

CSS

color: #E8F3CA;

custom properties

Tailwind

bg-[#E8F3CA] text-[#FFF]

arbitrary value

Android

#FFE8F3CA

ARGB

Flutter

Color(0xFFE8F3CA)

dart:ui

Photoshop

R 232 G 243 B 202 · C 5 M 0 Y 17 K 5

RGB / CMYK

CMYK 5,0,17,5

FOGRA39

Color analysis

Measured color properties

Lightness

0.855

relative luminance · warm

Contrast

1.16 : 1

vs white · FAIL · warm

Contrast

16.28 : 1

vs black · AAA · warm

Hue

76°

saturation 63% · warm

LCH

94,21,120

lightness 87% · warm

Delta E

19.0

凝脂 #EFE3DB · warm

Similar colors

Nearest colors from the full Irodori library, ranked by ΔE.

Pale Yellow #FAFAD2ΔE 5.2 Pale Yellow #F5F5DCΔE 9.3 Pale Orange #FFEBCDΔE 12.8 Pale Yellow #EEE8AAΔE 13.1 Putih #F2EAD9ΔE 14.0 Pale Green #F0FFF0ΔE 14.2

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 19.0