← Back to Editor

#F19839 · #7E5F31 · #557A61 · #5FC488 · #D2D19C

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

#F19839

Ginger · GoldenRod · Warm Sun

HEX
#F19839
RGB
rgb(241, 152, 57)
HSL
hsl(31, 87%, 58%)
HSB
hsb(31, 76%, 95%)
CMYK
cmyk(0%, 37%, 76%, 5%)
Oklch
oklch(75.5% 0.150 63.1)

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

#7E5F31

Ochre · Sienna · Amber Brown

HEX
#7E5F31
RGB
rgb(126, 95, 49)
HSL
hsl(36, 44%, 34%)
HSB
hsb(36, 61%, 49%)
CMYK
cmyk(0%, 25%, 61%, 51%)
Oklch
oklch(50.7% 0.075 75.5)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#557A61

Celadon · DimGray · Olive Green

HEX
#557A61
RGB
rgb(85, 122, 97)
HSL
hsl(139, 18%, 41%)
HSB
hsb(139, 30%, 48%)
CMYK
cmyk(30%, 0%, 20%, 52%)
Oklch
oklch(54.4% 0.057 154.5)

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

#5FC488

Celadon · MediumAquaMarine · Olive Green

HEX
#5FC488
RGB
rgb(95, 196, 136)
HSL
hsl(144, 46%, 57%)
HSB
hsb(144, 52%, 77%)
CMYK
cmyk(52%, 0%, 31%, 23%)
Oklch
oklch(74.4% 0.130 155.4)

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

#D2D19C

Fresh Green · Tan · Sunflower

HEX
#D2D19C
RGB
rgb(210, 209, 156)
HSL
hsl(59, 37%, 72%)
HSB
hsb(59, 26%, 82%)
CMYK
cmyk(0%, 0%, 26%, 18%)
Oklch
oklch(84.8% 0.070 106.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F19839
3791F1

Analogous

F13A37
F19839
EEF137

Triadic

F19839
37F197
9737F1

Split-Comp.

F19839
37EEF1
3A37F1

Tetradic

F19839
37F13A
3791F1
F137EE

Contrast Matrix WCAG 2.1 Contrast

F19839
7E5F31
557A61
5FC488
D2D19C
—
2.6
Fail
2.1
Fail
1.0
Fail
1.4
Fail
2.6
Fail
—
1.2
Fail
2.7
Fail
3.7
AA Large
2.1
Fail
1.2
Fail
—
2.2
Fail
3.1
AA Large
1.0
Fail
2.7
Fail
2.2
Fail
—
1.4
Fail
1.4
Fail
3.7
AA Large
3.1
AA Large
1.4
Fail
—
White BG
2.3Fail
5.9AA
4.8AA
2.2Fail
1.6Fail
Black BG
9.3AAA
3.6AA Large
4.3AA Large
9.7AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACA50
71703C
656567
8B8C97
D2D2A9

Deuteranopia

D0D656
72753F
636069
857D9A
D2D2AC

Tritanopia

ED6266
7C4547
576C6D
64A2A5
D2B3B5

Achromatopsia

A8A8A8
636363
6C6C6C
9F9F9F
CBCBCB

Shades & Tints Shades & Tints

#F19839

Dark
Light

#7E5F31

Dark
Light

#557A61

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f19839;
  --color-2: #7e5f31;
  --color-3: #557a61;
  --color-4: #5fc488;
  --color-5: #d2d19c;
}

SCSS

$color-1: #f19839;
$color-2: #7e5f31;
$color-3: #557a61;
$color-4: #5fc488;
$color-5: #d2d19c;

TAILWIND

colors: {
  'brand-1': '#f19839',
  'brand-2': '#7e5f31',
  'brand-3': '#557a61',
  'brand-4': '#5fc488',
  'brand-5': '#d2d19c',
}

RGB Array

[241, 152, 57], [126, 95, 49], [85, 122, 97], [95, 196, 136], [210, 209, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F19839, #7E5F31, #557A61, #5FC488, #D2D19C 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: #f19839; --color-2: #7e5f31; --color-3: #557a61; --color-4: #5fc488; --color-5: #d2d19c. 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