#FF8138 + #FFC29E + #F7F3F0 + #D3DFE0 + #9EB8BA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF8138

Apricot · Coral · Warm Sun

HEX

#FF8138

RGB

rgb(255, 129, 56)

HSL

hsl(22, 100%, 61%)

HSB

hsb(22, 78%, 100%)

CMYK

cmyk(0%, 49%, 78%, 0%)

Oklch

oklch(73.6% 0.175 47.3)

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

#FFC29E

Apricot · Wheat · Peach Orange

HEX

#FFC29E

RGB

rgb(255, 194, 158)

HSL

hsl(22, 100%, 81%)

HSB

hsb(22, 38%, 100%)

CMYK

cmyk(0%, 24%, 38%, 0%)

Oklch

oklch(86.1% 0.085 51.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F7F3F0

Apricot · SeaShell · Peach Orange

HEX

#F7F3F0

RGB

rgb(247, 243, 240)

HSL

hsl(26, 30%, 95%)

HSB

hsb(26, 3%, 97%)

CMYK

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

Oklch

oklch(96.6% 0.006 59.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D3DFE0

Sky Blue · LightGray · Glacier Blue

HEX

#D3DFE0

RGB

rgb(211, 223, 224)

HSL

hsl(185, 17%, 85%)

HSB

hsb(185, 6%, 88%)

CMYK

cmyk(6%, 0%, 0%, 12%)

Oklch

oklch(89.5% 0.013 202.9)

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

#9EB8BA

Sky Blue · DarkGray · Lake Green

HEX

#9EB8BA

RGB

rgb(158, 184, 186)

HSL

hsl(184, 17%, 67%)

HSB

hsb(184, 15%, 73%)

CMYK

cmyk(15%, 1%, 0%, 27%)

Oklch

oklch(76.4% 0.029 202.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8138

38B6FF

Analogous

FF3853

FF8138

FFE438

Triadic

FF8138

38FF81

8138FF

Split-Comp.

FF8138

38FFE4

3853FF

Tetradic

FF8138

53FF38

38B6FF

E438FF

Contrast Matrix WCAG 2.1 Contrast

FF8138	FFC29E	F7F3F0	D3DFE0	9EB8BA
—	1.6 Fail	2.3 Fail	1.8 Fail	1.2 Fail
1.6 Fail	—	1.4 Fail	1.1 Fail	1.3 Fail
2.3 Fail	1.4 Fail	—	1.2 Fail	1.9 Fail
1.8 Fail	1.1 Fail	1.2 Fail	—	1.5 Fail
1.2 Fail	1.3 Fail	1.9 Fail	1.5 Fail	—

White BG

2.5Fail

1.6Fail

1.1Fail

1.4Fail

2.1Fail

Black BG

8.4AAA

13.5AAA

19.0AAA

15.4AAA

10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C74A

E5E4A7

F5F5F1

D8D8E0

A9A9BA

Deuteranopia

D0D94E

E8EDA9

F6F6F1

D8D7E0

A8A6B9

Tritanopia

F9585B

FCAEAF

F7F1F1

D4E0E0

9FB9B9

Achromatopsia

9E9E9E

D0D0D0

F4F4F4

DCDCDC

B0B0B0

Shades & Tints Shades & Tints

#FF8138

Dark

Light

#FFC29E

Dark

Light

#F7F3F0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8138;
  --color-2: #ffc29e;
  --color-3: #f7f3f0;
  --color-4: #d3dfe0;
  --color-5: #9eb8ba;
}

SCSS

$color-1: #ff8138;
$color-2: #ffc29e;
$color-3: #f7f3f0;
$color-4: #d3dfe0;
$color-5: #9eb8ba;

TAILWIND

colors: {
  'brand-1': '#ff8138',
  'brand-2': '#ffc29e',
  'brand-3': '#f7f3f0',
  'brand-4': '#d3dfe0',
  'brand-5': '#9eb8ba',
}

RGB Array

[255, 129, 56], [255, 194, 158], [247, 243, 240], [211, 223, 224], [158, 184, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8138, #FFC29E, #F7F3F0, #D3DFE0, #9EB8BA 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: #ff8138; --color-2: #ffc29e; --color-3: #f7f3f0; --color-4: #d3dfe0; --color-5: #9eb8ba. 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