#F27641 + #D1B998 + #D7DEC1 + #EBE9D1 + #ABD5D9 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F27641

Tangerine · Coral · Warm Sun

HEX

#F27641

RGB

rgb(242, 118, 65)

HSL

hsl(18, 87%, 60%)

HSB

hsb(18, 73%, 95%)

CMYK

cmyk(0%, 51%, 73%, 5%)

Oklch

oklch(70.2% 0.167 42.4)

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

#D1B998

Goose Yellow · Tan · Warm Sun

HEX

#D1B998

RGB

rgb(209, 185, 152)

HSL

hsl(35, 38%, 71%)

HSB

hsb(35, 27%, 82%)

CMYK

cmyk(0%, 11%, 27%, 18%)

Oklch

oklch(79.8% 0.052 75.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D7DEC1

Willow Green · LightGray · Mint Green

HEX

#D7DEC1

RGB

rgb(215, 222, 193)

HSL

hsl(74, 31%, 81%)

HSB

hsb(74, 13%, 87%)

CMYK

cmyk(3%, 0%, 13%, 13%)

Oklch

oklch(88.8% 0.039 118.2)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#EBE9D1

Fresh Green · Beige · Lemon Cream

HEX

#EBE9D1

RGB

rgb(235, 233, 209)

HSL

hsl(55, 39%, 87%)

HSB

hsb(55, 11%, 92%)

CMYK

cmyk(0%, 1%, 11%, 8%)

Oklch

oklch(92.9% 0.032 103.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#ABD5D9

Sky Blue · LightBlue · Glacier Blue

HEX

#ABD5D9

RGB

rgb(171, 213, 217)

HSL

hsl(185, 38%, 76%)

HSB

hsb(185, 21%, 85%)

CMYK

cmyk(21%, 2%, 0%, 15%)

Oklch

oklch(84.4% 0.044 203.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F27641

40BCF2

Analogous

F24064

F27641

F2CE40

Triadic

F27641

40F276

7640F2

Split-Comp.

F27641

40F2CE

4064F2

Tetradic

F27641

64F240

40BCF2

CE40F2

Contrast Matrix WCAG 2.1 Contrast

F27641	D1B998	D7DEC1	EBE9D1	ABD5D9
—	1.5 Fail	2.0 Fail	2.3 Fail	1.8 Fail
1.5 Fail	—	1.4 Fail	1.5 Fail	1.2 Fail
2.0 Fail	1.4 Fail	—	1.1 Fail	1.1 Fail
2.3 Fail	1.5 Fail	1.1 Fail	—	1.3 Fail
1.8 Fail	1.2 Fail	1.1 Fail	1.3 Fail	—

White BG

2.8Fail

1.9Fail

1.4Fail

1.2Fail

1.6Fail

Black BG

7.4AAA

11.1AAA

15.1AAA

17.1AAA

13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB4E

C7C6A0

DADAC8

EAEAD7

BDBED8

Deuteranopia

C4CD51

C8CAA2

DAD9CA

EAEAD8

BBB8D8

Tritanopia

EC585A

D0A6A8

D7CECF

EBDBDC

ADD7D7

Achromatopsia

959595

BCBCBC

D9D9D9

E7E7E7

C9C9C9

Shades & Tints Shades & Tints

#F27641

Dark

Light

#D1B998

Dark

Light

#D7DEC1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f27641;
  --color-2: #d1b998;
  --color-3: #d7dec1;
  --color-4: #ebe9d1;
  --color-5: #abd5d9;
}

SCSS

$color-1: #f27641;
$color-2: #d1b998;
$color-3: #d7dec1;
$color-4: #ebe9d1;
$color-5: #abd5d9;

TAILWIND

colors: {
  'brand-1': '#f27641',
  'brand-2': '#d1b998',
  'brand-3': '#d7dec1',
  'brand-4': '#ebe9d1',
  'brand-5': '#abd5d9',
}

RGB Array

[242, 118, 65], [209, 185, 152], [215, 222, 193], [235, 233, 209], [171, 213, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F27641, #D1B998, #D7DEC1, #EBE9D1, #ABD5D9 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: #f27641; --color-2: #d1b998; --color-3: #d7dec1; --color-4: #ebe9d1; --color-5: #abd5d9. 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 warm-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