#F68736 + #E55C25 + #EBD89D + #8FA98C + #B3DABD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F68736

Tangerine · Coral · Warm Sun

HEX

#F68736

RGB

rgb(246, 135, 54)

HSL

hsl(25, 91%, 59%)

HSB

hsb(25, 78%, 96%)

CMYK

cmyk(0%, 45%, 78%, 4%)

Oklch

oklch(73.3% 0.163 52.6)

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

#E55C25

Tangerine · Chocolate · Warm Sun

HEX

#E55C25

RGB

rgb(229, 92, 37)

HSL

hsl(17, 79%, 52%)

HSB

hsb(17, 84%, 90%)

CMYK

cmyk(0%, 60%, 84%, 10%)

Oklch

oklch(64.4% 0.182 40.0)

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

#EBD89D

Goose Yellow · Khaki · Lemon Cream

HEX

#EBD89D

RGB

rgb(235, 216, 157)

HSL

hsl(45, 66%, 77%)

HSB

hsb(45, 33%, 92%)

CMYK

cmyk(0%, 8%, 33%, 8%)

Oklch

oklch(88.4% 0.079 92.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#8FA98C

Celadon · DarkSeaGreen · Apple Green

HEX

#8FA98C

RGB

rgb(143, 169, 140)

HSL

hsl(114, 14%, 61%)

HSB

hsb(114, 17%, 66%)

CMYK

cmyk(15%, 0%, 17%, 34%)

Oklch

oklch(70.7% 0.051 142.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#B3DABD

Celadon · Silver · Apple Green

HEX

#B3DABD

RGB

rgb(179, 218, 189)

HSL

hsl(135, 35%, 78%)

HSB

hsb(135, 18%, 85%)

CMYK

cmyk(18%, 0%, 13%, 15%)

Oklch

oklch(85.2% 0.057 152.9)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F68736

37A6F6

Analogous

F63747

F68736

F6E637

Triadic

F68736

37F687

8737F6

Split-Comp.

F68736

37F6E6

3747F6

Tetradic

F68736

47F637

37A6F6

E637F6

Contrast Matrix WCAG 2.1 Contrast

F68736	E55C25	EBD89D	8FA98C	B3DABD
—	1.4 Fail	1.8 Fail	1.0 Fail	1.6 Fail
1.4 Fail	—	2.5 Fail	1.4 Fail	2.3 Fail
1.8 Fail	2.5 Fail	—	1.8 Fail	1.1 Fail
1.0 Fail	1.4 Fail	1.8 Fail	—	1.7 Fail
1.6 Fail	2.3 Fail	1.1 Fail	1.7 Fail	—

White BG

2.5Fail

3.6AA Large

1.4Fail

2.6Fail

1.5Fail

Black BG

8.4AAA

5.9AA

14.8AAA

8.2AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C54A

AAA832

E3E3AB

9A9A93

C4C4C4

Deuteranopia

CCD54E

B2BC36

E4E5AF

999795

C2BFC6

Tritanopia

F0595C

DE3D3F

EAB7B9

90999A

B5CACB

Achromatopsia

9F9F9F

7F7F7F

D7D7D7

9E9E9E

CBCBCB

Shades & Tints Shades & Tints

#F68736

Dark

Light

#E55C25

Dark

Light

#EBD89D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f68736;
  --color-2: #e55c25;
  --color-3: #ebd89d;
  --color-4: #8fa98c;
  --color-5: #b3dabd;
}

SCSS

$color-1: #f68736;
$color-2: #e55c25;
$color-3: #ebd89d;
$color-4: #8fa98c;
$color-5: #b3dabd;

TAILWIND

colors: {
  'brand-1': '#f68736',
  'brand-2': '#e55c25',
  'brand-3': '#ebd89d',
  'brand-4': '#8fa98c',
  'brand-5': '#b3dabd',
}

RGB Array

[246, 135, 54], [229, 92, 37], [235, 216, 157], [143, 169, 140], [179, 218, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F68736, #E55C25, #EBD89D, #8FA98C, #B3DABD 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: #f68736; --color-2: #e55c25; --color-3: #ebd89d; --color-4: #8fa98c; --color-5: #b3dabd. 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