← Back to Editor

#9E905F · #F71919 · #CC0A3B · #E6CF9A · #9EC49D

bright

A 5-color bright 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

#9E905F

Ochre · Gray · Honey Gold

HEX
#9E905F
RGB
rgb(158, 144, 95)
HSL
hsl(47, 25%, 50%)
HSB
hsb(47, 40%, 62%)
CMYK
cmyk(0%, 9%, 40%, 38%)
Oklch
oklch(65.4% 0.069 94.0)

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

#F71919

Vermilion · Red · Passion Red

HEX
#F71919
RGB
rgb(247, 25, 25)
HSL
hsl(0, 93%, 53%)
HSB
hsb(0, 90%, 97%)
CMYK
cmyk(0%, 90%, 90%, 3%)
Oklch
oklch(62.0% 0.245 28.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#CC0A3B

Vermilion · Crimson · Passion Red

HEX
#CC0A3B
RGB
rgb(204, 10, 59)
HSL
hsl(345, 91%, 42%)
HSB
hsb(345, 95%, 80%)
CMYK
cmyk(0%, 95%, 71%, 20%)
Oklch
oklch(53.8% 0.212 18.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#E6CF9A

Goose Yellow · Khaki · Sunflower

HEX
#E6CF9A
RGB
rgb(230, 207, 154)
HSL
hsl(42, 60%, 75%)
HSB
hsb(42, 33%, 90%)
CMYK
cmyk(0%, 10%, 33%, 10%)
Oklch
oklch(86.1% 0.074 87.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#9EC49D

Celadon · DarkSeaGreen · Apple Green

HEX
#9EC49D
RGB
rgb(158, 196, 157)
HSL
hsl(118, 25%, 69%)
HSB
hsb(118, 20%, 77%)
CMYK
cmyk(19%, 0%, 20%, 23%)
Oklch
oklch(78.2% 0.068 144.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E905F
606D9F

Analogous

9F7260
9E905F
8D9F60

Triadic

9E905F
609F92
92609F

Split-Comp.

9E905F
608D9F
72609F

Tetradic

9E905F
609F72
606D9F
9F608D

Contrast Matrix WCAG 2.1 Contrast

9E905F
F71919
CC0A3B
E6CF9A
9EC49D
—
1.3
Fail
1.8
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
2.7
Fail
2.1
Fail
1.8
Fail
1.4
Fail
—
3.7
AA Large
2.9
Fail
2.1
Fail
2.7
Fail
3.7
AA Large
—
1.3
Fail
1.6
Fail
2.1
Fail
2.9
Fail
1.3
Fail
—
White BG
3.2AA Large
4.1AA Large
5.7AA
1.5Fail
1.9Fail
Black BG
6.6AA
5.1AA
3.7AA Large
13.8AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

98986B
979519
78762F
DCDCA7
AEAFA6

Deuteranopia

999A6E
A4B419
83922C
DDDFAA
ACA9A9

Tritanopia

9D7476
EC1919
C22624
E5B1B3
A0AEB0

Achromatopsia

8F8F8F
5B5B5B
4A4A4A
D0D0D0
B4B4B4

Shades & Tints Shades & Tints

#9E905F

Dark
Light

#F71919

Dark
Light

#CC0A3B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e905f;
  --color-2: #f71919;
  --color-3: #cc0a3b;
  --color-4: #e6cf9a;
  --color-5: #9ec49d;
}

SCSS

$color-1: #9e905f;
$color-2: #f71919;
$color-3: #cc0a3b;
$color-4: #e6cf9a;
$color-5: #9ec49d;

TAILWIND

colors: {
  'brand-1': '#9e905f',
  'brand-2': '#f71919',
  'brand-3': '#cc0a3b',
  'brand-4': '#e6cf9a',
  'brand-5': '#9ec49d',
}

RGB Array

[158, 144, 95], [247, 25, 25], [204, 10, 59], [230, 207, 154], [158, 196, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #9E905F, #F71919, #CC0A3B, #E6CF9A, #9EC49D 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: #9e905f; --color-2: #f71919; --color-3: #cc0a3b; --color-4: #e6cf9a; --color-5: #9ec49d. 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