← Back to Editor

#FFBC37 · #D07D3D · #A03D42 · #81383F · #62333B

sunset

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

#FFBC37

Ginger · SandyBrown · Sunflower

HEX
#FFBC37
RGB
rgb(255, 188, 55)
HSL
hsl(40, 100%, 61%)
HSB
hsb(40, 78%, 100%)
CMYK
cmyk(0%, 26%, 78%, 0%)
Oklch
oklch(83.6% 0.158 79.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D07D3D

Tangerine · Chocolate · Warm Sun

HEX
#D07D3D
RGB
rgb(208, 125, 61)
HSL
hsl(26, 61%, 53%)
HSB
hsb(26, 71%, 82%)
CMYK
cmyk(0%, 40%, 71%, 18%)
Oklch
oklch(66.7% 0.130 55.6)

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

#A03D42

Crimson · Sienna · Passion Red

HEX
#A03D42
RGB
rgb(160, 61, 66)
HSL
hsl(357, 45%, 43%)
HSB
hsb(357, 62%, 63%)
CMYK
cmyk(0%, 62%, 59%, 37%)
Oklch
oklch(49.8% 0.132 20.3)

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

#81383F

Crimson · Brown · Wine Red

HEX
#81383F
RGB
rgb(129, 56, 63)
HSL
hsl(354, 39%, 36%)
HSB
hsb(354, 57%, 51%)
CMYK
cmyk(0%, 57%, 51%, 49%)
Oklch
oklch(44.1% 0.101 16.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#62333B

Crimson · DarkOliveGreen · Wine Red

HEX
#62333B
RGB
rgb(98, 51, 59)
HSL
hsl(350, 32%, 29%)
HSB
hsb(350, 48%, 38%)
CMYK
cmyk(0%, 48%, 40%, 62%)
Oklch
oklch(38.4% 0.068 9.9)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBC37
387AFF

Analogous

FF5938
FFBC37
DEFF38

Triadic

FFBC37
38FFBD
BD38FF

Split-Comp.

FFBC37
38DEFF
5938FF

Tetradic

FFBC37
38FF59
387AFF
FF38DE

Contrast Matrix WCAG 2.1 Contrast

FFBC37
D07D3D
A03D42
81383F
62333B
—
1.9
Fail
3.9
AA Large
4.9
AA
6.1
AA
1.9
Fail
—
2.1
Fail
2.6
Fail
3.3
AA Large
3.9
AA Large
2.1
Fail
—
1.3
Fail
1.6
Fail
4.9
AA
2.6
Fail
1.3
Fail
—
1.3
Fail
6.1
AA
3.3
AA Large
1.6
Fail
1.3
Fail
—
White BG
1.7Fail
3.1AA Large
6.5AA
8.2AAA
10.2AAA
Black BG
12.5AAA
6.7AA
3.2AA Large
2.6Fail
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E157
ACAB4C
757441
61613D
4E4D39

Deuteranopia

E6EB5F
B1B750
7B8241
666B3D
505439

Tritanopia

FC7176
CC595B
9B4040
7D3C3C
603837

Achromatopsia

C1C1C1
8F8F8F
5B5B5B
4F4F4F
424242

Shades & Tints Shades & Tints

#FFBC37

Dark
Light

#D07D3D

Dark
Light

#A03D42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbc37;
  --color-2: #d07d3d;
  --color-3: #a03d42;
  --color-4: #81383f;
  --color-5: #62333b;
}

SCSS

$color-1: #ffbc37;
$color-2: #d07d3d;
$color-3: #a03d42;
$color-4: #81383f;
$color-5: #62333b;

TAILWIND

colors: {
  'brand-1': '#ffbc37',
  'brand-2': '#d07d3d',
  'brand-3': '#a03d42',
  'brand-4': '#81383f',
  'brand-5': '#62333b',
}

RGB Array

[255, 188, 55], [208, 125, 61], [160, 61, 66], [129, 56, 63], [98, 51, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FFBC37, #D07D3D, #A03D42, #81383F, #62333B 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: #ffbc37; --color-2: #d07d3d; --color-3: #a03d42; --color-4: #81383f; --color-5: #62333b. 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 sunset-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