#FC5C10 + #A2AB96 + #F78425 + #CBD4B6 + #F0F4E6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FC5C10

Tangerine · OrangeRed · Warm Sun

HEX

#FC5C10

RGB

rgb(252, 92, 16)

HSL

hsl(19, 98%, 53%)

HSB

hsb(19, 94%, 99%)

CMYK

cmyk(0%, 63%, 94%, 1%)

Oklch

oklch(67.9% 0.208 40.0)

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

#A2AB96

Willow Green · DarkGray · Apple Green

HEX

#A2AB96

RGB

rgb(162, 171, 150)

HSL

hsl(86, 11%, 63%)

HSB

hsb(86, 12%, 67%)

CMYK

cmyk(5%, 0%, 12%, 33%)

Oklch

oklch(72.8% 0.031 126.1)

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

#F78425

Tangerine · Coral · Warm Sun

HEX

#F78425

RGB

rgb(247, 132, 37)

HSL

hsl(27, 93%, 56%)

HSB

hsb(27, 85%, 97%)

CMYK

cmyk(0%, 47%, 85%, 3%)

Oklch

oklch(72.8% 0.171 53.7)

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

#CBD4B6

Willow Green · Silver · Apple Green

HEX

#CBD4B6

RGB

rgb(203, 212, 182)

HSL

hsl(78, 26%, 77%)

HSB

hsb(78, 14%, 83%)

CMYK

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

Oklch

oklch(85.5% 0.042 120.9)

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

#F0F4E6

Willow Green · Linen · Mint Green

HEX

#F0F4E6

RGB

rgb(240, 244, 230)

HSL

hsl(77, 39%, 93%)

HSB

hsb(77, 6%, 96%)

CMYK

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

Oklch

oklch(96.0% 0.019 119.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC5C10

12B2FD

Analogous

FD123D

FC5C10

FDD212

Triadic

FC5C10

12FD5C

5C12FD

Split-Comp.

FC5C10

12FDD2

123DFD

Tetradic

FC5C10

3DFD12

12B2FD

D212FD

Contrast Matrix WCAG 2.1 Contrast

FC5C10	A2AB96	F78425	CBD4B6	F0F4E6
—	1.3 Fail	1.2 Fail	2.0 Fail	2.8 Fail
1.3 Fail	—	1.1 Fail	1.5 Fail	2.1 Fail
1.2 Fail	1.1 Fail	—	1.6 Fail	2.3 Fail
2.0 Fail	1.5 Fail	1.6 Fail	—	1.4 Fail
2.8 Fail	2.1 Fail	2.3 Fail	1.4 Fail	—

White BG

3.1AA Large

2.4Fail

2.5Fail

1.5Fail

1.1Fail

Black BG

6.7AA

8.8AAA

8.3AAA

13.6AAA

18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B522

A6A69B

C5C43C

CFCFBD

F2F2E9

Deuteranopia

C0CC27

A5A59C

CCD442

CECEBF

F2F1EA

Tritanopia

F43134

A29FA0

F14E52

CBC3C4

F0ECED

Achromatopsia

838383

A6A6A6

9C9C9C

CECECE

F1F1F1

Shades & Tints Shades & Tints

#FC5C10

Dark

Light

#A2AB96

Dark

Light

#F78425

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc5c10;
  --color-2: #a2ab96;
  --color-3: #f78425;
  --color-4: #cbd4b6;
  --color-5: #f0f4e6;
}

SCSS

$color-1: #fc5c10;
$color-2: #a2ab96;
$color-3: #f78425;
$color-4: #cbd4b6;
$color-5: #f0f4e6;

TAILWIND

colors: {
  'brand-1': '#fc5c10',
  'brand-2': '#a2ab96',
  'brand-3': '#f78425',
  'brand-4': '#cbd4b6',
  'brand-5': '#f0f4e6',
}

RGB Array

[252, 92, 16], [162, 171, 150], [247, 132, 37], [203, 212, 182], [240, 244, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC5C10, #A2AB96, #F78425, #CBD4B6, #F0F4E6 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: #fc5c10; --color-2: #a2ab96; --color-3: #f78425; --color-4: #cbd4b6; --color-5: #f0f4e6. 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