← Back to Editor

#FFC27C · #FFAE50 · #9A9E6A · #5C7863 · #B4E6BF

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFC27C

Goose Yellow · LightSalmon · Warm Sun

HEX
#FFC27C
RGB
rgb(255, 194, 124)
HSL
hsl(32, 100%, 74%)
HSB
hsb(32, 51%, 100%)
CMYK
cmyk(0%, 24%, 51%, 0%)
Oklch
oklch(85.5% 0.112 69.2)

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

#FFAE50

Ginger · SandyBrown · Warm Sun

HEX
#FFAE50
RGB
rgb(255, 174, 80)
HSL
hsl(32, 100%, 66%)
HSB
hsb(32, 69%, 100%)
CMYK
cmyk(0%, 32%, 69%, 0%)
Oklch
oklch(81.3% 0.144 67.1)

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

#9A9E6A

Autumn Sage · Gray · Sunflower

HEX
#9A9E6A
RGB
rgb(154, 158, 106)
HSL
hsl(65, 21%, 52%)
HSB
hsb(65, 33%, 62%)
CMYK
cmyk(3%, 0%, 33%, 38%)
Oklch
oklch(68.3% 0.072 111.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#5C7863

Celadon · DimGray · Olive Green

HEX
#5C7863
RGB
rgb(92, 120, 99)
HSL
hsl(135, 13%, 42%)
HSB
hsb(135, 23%, 47%)
CMYK
cmyk(23%, 0%, 18%, 53%)
Oklch
oklch(54.4% 0.046 152.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B4E6BF

Celadon · Silver · Apple Green

HEX
#B4E6BF
RGB
rgb(180, 230, 191)
HSL
hsl(133, 50%, 80%)
HSB
hsb(133, 22%, 90%)
CMYK
cmyk(22%, 0%, 17%, 10%)
Oklch
oklch(88.0% 0.074 151.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFC27C
7AB8FF

Analogous

FF7F7A
FFC27C
FBFF7A

Triadic

FFC27C
7AFFC1
C17AFF

Split-Comp.

FFC27C
7AFBFF
7F7AFF

Tetradic

FFC27C
7AFF7F
7AB8FF
FF7AFB

Contrast Matrix WCAG 2.1 Contrast

FFC27C
FFAE50
9A9E6A
5C7863
B4E6BF
—
1.2
Fail
1.8
Fail
3.1
AA Large
1.1
Fail
1.2
Fail
—
1.5
Fail
2.6
Fail
1.3
Fail
1.8
Fail
1.5
Fail
—
1.7
Fail
2.0
Fail
3.1
AA Large
2.6
Fail
1.7
Fail
—
3.5
AA Large
1.1
Fail
1.3
Fail
2.0
Fail
3.5
AA Large
—
White BG
1.6Fail
1.8Fail
2.8Fail
4.9AA
1.4Fail
Black BG
13.3AAA
11.4AAA
7.5AAA
4.3AA Large
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E48D
DCDB67
9C9C77
686868
CACAC8

Deuteranopia

E8ED91
E1E76C
9C9B7A
676469
C7C3CB

Tritanopia

FC9A9D
FB797D
9A8183
5D6C6D
B7D0D2

Achromatopsia

CCCCCC
BCBCBC
979797
6D6D6D
D3D3D3

Shades & Tints Shades & Tints

#FFC27C

Dark
Light

#FFAE50

Dark
Light

#9A9E6A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffc27c;
  --color-2: #ffae50;
  --color-3: #9a9e6a;
  --color-4: #5c7863;
  --color-5: #b4e6bf;
}

SCSS

$color-1: #ffc27c;
$color-2: #ffae50;
$color-3: #9a9e6a;
$color-4: #5c7863;
$color-5: #b4e6bf;

TAILWIND

colors: {
  'brand-1': '#ffc27c',
  'brand-2': '#ffae50',
  'brand-3': '#9a9e6a',
  'brand-4': '#5c7863',
  'brand-5': '#b4e6bf',
}

RGB Array

[255, 194, 124], [255, 174, 80], [154, 158, 106], [92, 120, 99], [180, 230, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFC27C, #FFAE50, #9A9E6A, #5C7863, #B4E6BF is ideal for: corporate websites, product showcases, portfolios. 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: #ffc27c; --color-2: #ffae50; --color-3: #9a9e6a; --color-4: #5c7863; --color-5: #b4e6bf. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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