#ED771D + #F1A846 + #EDCCC4 + #EAE8EF + #BCD7CD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ED771D

Tangerine · Chocolate · Warm Sun

HEX

#ED771D

RGB

rgb(237, 119, 29)

HSL

hsl(26, 85%, 52%)

HSB

hsb(26, 88%, 93%)

CMYK

cmyk(0%, 50%, 88%, 7%)

Oklch

oklch(69.4% 0.171 51.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F1A846

Ginger · SandyBrown · Warm Sun

HEX

#F1A846

RGB

rgb(241, 168, 70)

HSL

hsl(34, 86%, 61%)

HSB

hsb(34, 71%, 95%)

CMYK

cmyk(0%, 30%, 71%, 5%)

Oklch

oklch(78.5% 0.140 70.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#EDCCC4

Peach Pink · Pink · Cherry Blossom

HEX

#EDCCC4

RGB

rgb(237, 204, 196)

HSL

hsl(12, 53%, 85%)

HSB

hsb(12, 17%, 93%)

CMYK

cmyk(0%, 14%, 17%, 7%)

Oklch

oklch(87.1% 0.039 33.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EAE8EF

Wisteria · Lavender · Sky Blue

HEX

#EAE8EF

RGB

rgb(234, 232, 239)

HSL

hsl(257, 18%, 92%)

HSB

hsb(257, 3%, 94%)

CMYK

cmyk(2%, 3%, 0%, 6%)

Oklch

oklch(93.5% 0.010 299.2)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#BCD7CD

Jade · LightGray · Apple Green

HEX

#BCD7CD

RGB

rgb(188, 215, 205)

HSL

hsl(158, 25%, 79%)

HSB

hsb(158, 13%, 84%)

CMYK

cmyk(13%, 0%, 5%, 16%)

Oklch

oklch(85.6% 0.032 171.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ED771D

1D92ED

Analogous

ED1D2A

ED771D

EDDF1D

Triadic

ED771D

1DED77

771DED

Split-Comp.

ED771D

1DEDDF

1D2AED

Tetradic

ED771D

2AED1D

1D92ED

DF1DED

Contrast Matrix WCAG 2.1 Contrast

ED771D	F1A846	EDCCC4	EAE8EF	BCD7CD
—	1.4 Fail	1.9 Fail	2.4 Fail	1.9 Fail
1.4 Fail	—	1.3 Fail	1.7 Fail	1.3 Fail
1.9 Fail	1.3 Fail	—	1.2 Fail	1.0 Fail
2.4 Fail	1.7 Fail	1.2 Fail	—	1.3 Fail
1.9 Fail	1.3 Fail	1.0 Fail	1.3 Fail	—

White BG

2.9Fail

2.0Fail

1.5Fail

1.2Fail

1.5Fail

Black BG

7.3AAA

10.4AAA

14.0AAA

17.3AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BAB933

D1D15E

DFDEC6

E9E9ED

C8C8CF

Deuteranopia

C1CA38

D6DB63

E1E3C6

E9E9ED

C6C4D0

Tritanopia

E74448

ED7075

EBC7C8

EAECEC

BDD1D2

Achromatopsia

909090

B3B3B3

D5D5D5

E9E9E9

CECECE

Shades & Tints Shades & Tints

#ED771D

Dark

Light

#F1A846

Dark

Light

#EDCCC4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ed771d;
  --color-2: #f1a846;
  --color-3: #edccc4;
  --color-4: #eae8ef;
  --color-5: #bcd7cd;
}

SCSS

$color-1: #ed771d;
$color-2: #f1a846;
$color-3: #edccc4;
$color-4: #eae8ef;
$color-5: #bcd7cd;

TAILWIND

colors: {
  'brand-1': '#ed771d',
  'brand-2': '#f1a846',
  'brand-3': '#edccc4',
  'brand-4': '#eae8ef',
  'brand-5': '#bcd7cd',
}

RGB Array

[237, 119, 29], [241, 168, 70], [237, 204, 196], [234, 232, 239], [188, 215, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ED771D, #F1A846, #EDCCC4, #EAE8EF, #BCD7CD is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ed771d; --color-2: #f1a846; --color-3: #edccc4; --color-4: #eae8ef; --color-5: #bcd7cd. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color