← Back to Editor

#FAB907 · #CCA82A · #9D984E · #6E8671 · #527C86

bright

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FAB907

Ochre · Orange · Honey Gold

HEX
#FAB907
RGB
rgb(250, 185, 7)
HSL
hsl(44, 96%, 50%)
HSB
hsb(44, 97%, 98%)
CMYK
cmyk(0%, 26%, 97%, 2%)
Oklch
oklch(82.4% 0.169 82.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#CCA82A

Ochre · GoldenRod · Honey Gold

HEX
#CCA82A
RGB
rgb(204, 168, 42)
HSL
hsl(47, 66%, 48%)
HSB
hsb(47, 79%, 80%)
CMYK
cmyk(0%, 18%, 79%, 20%)
Oklch
oklch(74.3% 0.140 91.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#9D984E

Autumn Sage · Gray · Honey Gold

HEX
#9D984E
RGB
rgb(157, 152, 78)
HSL
hsl(56, 34%, 46%)
HSB
hsb(56, 50%, 62%)
CMYK
cmyk(0%, 3%, 50%, 38%)
Oklch
oklch(66.8% 0.096 105.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#6E8671

Celadon · Gray · Olive Green

HEX
#6E8671
RGB
rgb(110, 134, 113)
HSL
hsl(127, 10%, 48%)
HSB
hsb(127, 18%, 53%)
CMYK
cmyk(18%, 0%, 16%, 47%)
Oklch
oklch(59.5% 0.042 148.5)

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

#527C86

Slate Blue · SlateGray · Mint Ice

HEX
#527C86
RGB
rgb(82, 124, 134)
HSL
hsl(192, 24%, 42%)
HSB
hsb(192, 39%, 53%)
CMYK
cmyk(39%, 7%, 0%, 47%)
Oklch
oklch(55.9% 0.049 214.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAB907
0546FA

Analogous

FA3E05
FAB907
C1FA05

Triadic

FAB907
05FAB9
B905FA

Split-Comp.

FAB907
05C1FA
3E05FA

Tetradic

FAB907
05FA3E
0546FA
FA05C1

Contrast Matrix WCAG 2.1 Contrast

FAB907
CCA82A
9D984E
6E8671
527C86
—
1.3
Fail
1.7
Fail
2.3
Fail
2.6
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
2.6
Fail
2.0
Fail
1.5
Fail
1.2
Fail
—
White BG
1.7Fail
2.3Fail
3.0Fail
4.0AA Large
4.6AA
Black BG
12.0AAA
9.2AAA
7.0AAA
5.3AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDD32
BCBC48
9B9B60
787976
646584

Deuteranopia

E2E73C
BFC150
9B9C64
777577
625F83

Tritanopia

F7545C
CA6166
9D6E71
6F7A7B
548281

Achromatopsia

B8B8B8
A4A4A4
919191
7C7C7C
717171

Shades & Tints Shades & Tints

#FAB907

Dark
Light

#CCA82A

Dark
Light

#9D984E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fab907;
  --color-2: #cca82a;
  --color-3: #9d984e;
  --color-4: #6e8671;
  --color-5: #527c86;
}

SCSS

$color-1: #fab907;
$color-2: #cca82a;
$color-3: #9d984e;
$color-4: #6e8671;
$color-5: #527c86;

TAILWIND

colors: {
  'brand-1': '#fab907',
  'brand-2': '#cca82a',
  'brand-3': '#9d984e',
  'brand-4': '#6e8671',
  'brand-5': '#527c86',
}

RGB Array

[250, 185, 7], [204, 168, 42], [157, 152, 78], [110, 134, 113], [82, 124, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #FAB907, #CCA82A, #9D984E, #6E8671, #527C86 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: #fab907; --color-2: #cca82a; --color-3: #9d984e; --color-4: #6e8671; --color-5: #527c86. 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 bright-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