#FC6F17 + #C2A94F + #9BCC99 + #9EDEC2 + #BBF2F1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FC6F17

Tangerine · Chocolate · Warm Sun

HEX

#FC6F17

RGB

rgb(252, 111, 23)

HSL

hsl(23, 97%, 54%)

HSB

hsb(23, 91%, 99%)

CMYK

cmyk(0%, 56%, 91%, 1%)

Oklch

oklch(70.4% 0.192 45.5)

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

#C2A94F

Ginger · GoldenRod · Sunflower

HEX

#C2A94F

RGB

rgb(194, 169, 79)

HSL

hsl(47, 49%, 54%)

HSB

hsb(47, 59%, 76%)

CMYK

cmyk(0%, 13%, 59%, 24%)

Oklch

oklch(73.9% 0.114 93.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#9BCC99

Celadon · DarkSeaGreen · Apple Green

HEX

#9BCC99

RGB

rgb(155, 204, 153)

HSL

hsl(118, 33%, 70%)

HSB

hsb(118, 25%, 80%)

CMYK

cmyk(24%, 0%, 25%, 20%)

Oklch

oklch(79.7% 0.088 143.7)

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

#9EDEC2

Jade · LightBlue · Apple Green

HEX

#9EDEC2

RGB

rgb(158, 222, 194)

HSL

hsl(154, 49%, 75%)

HSB

hsb(154, 29%, 87%)

CMYK

cmyk(29%, 0%, 13%, 13%)

Oklch

oklch(85.0% 0.076 165.7)

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

#BBF2F1

Jade · LightBlue · Glacier Blue

HEX

#BBF2F1

RGB

rgb(187, 242, 241)

HSL

hsl(179, 68%, 84%)

HSB

hsb(179, 23%, 95%)

CMYK

cmyk(23%, 0%, 0%, 5%)

Oklch

oklch(92.3% 0.056 194.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC6F17

18A4FB

Analogous

FB1832

FC6F17

FBE118

Triadic

FC6F17

18FB6F

6F18FB

Split-Comp.

FC6F17

18FBE1

1832FB

Tetradic

FC6F17

32FB18

18A4FB

E118FB

Contrast Matrix WCAG 2.1 Contrast

FC6F17	C2A94F	9BCC99	9EDEC2	BBF2F1
—	1.2 Fail	1.5 Fail	1.8 Fail	2.3 Fail
1.2 Fail	—	1.3 Fail	1.5 Fail	1.9 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.3 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

2.8Fail

2.3Fail

1.8Fail

1.5Fail

1.2Fail

Black BG

7.4AAA

9.1AAA

11.5AAA

13.7AAA

17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBE2C

B7B765

B0B1A5

BABAC9

D3D3F1

Deuteranopia

C7D231

B9BA6A

ADAAA8

B6B1CA

D0CCF1

Tritanopia

F53D41

C1767A

9DAFB1

A1CECF

BEF1F1

Achromatopsia

8F8F8F

A6A6A6

B8B8B8

C8C8C8

E1E1E1

Shades & Tints Shades & Tints

#FC6F17

Dark

Light

#C2A94F

Dark

Light

#9BCC99

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc6f17;
  --color-2: #c2a94f;
  --color-3: #9bcc99;
  --color-4: #9edec2;
  --color-5: #bbf2f1;
}

SCSS

$color-1: #fc6f17;
$color-2: #c2a94f;
$color-3: #9bcc99;
$color-4: #9edec2;
$color-5: #bbf2f1;

TAILWIND

colors: {
  'brand-1': '#fc6f17',
  'brand-2': '#c2a94f',
  'brand-3': '#9bcc99',
  'brand-4': '#9edec2',
  'brand-5': '#bbf2f1',
}

RGB Array

[252, 111, 23], [194, 169, 79], [155, 204, 153], [158, 222, 194], [187, 242, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC6F17, #C2A94F, #9BCC99, #9EDEC2, #BBF2F1 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: #fc6f17; --color-2: #c2a94f; --color-3: #9bcc99; --color-4: #9edec2; --color-5: #bbf2f1. 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