← Back to Editor

#450E0D · #D1460B · #FFC039 · #CFE0A1 · #638655

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#450E0D

Vermilion · Maroon · Deep Berry

HEX
#450E0D
RGB
rgb(69, 14, 13)
HSL
hsl(1, 68%, 16%)
HSB
hsb(1, 81%, 27%)
CMYK
cmyk(0%, 80%, 81%, 73%)
Oklch
oklch(26.2% 0.084 26.0)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#D1460B

Tangerine · Chocolate · Amber Brown

HEX
#D1460B
RGB
rgb(209, 70, 11)
HSL
hsl(18, 90%, 43%)
HSB
hsb(18, 95%, 82%)
CMYK
cmyk(0%, 67%, 95%, 18%)
Oklch
oklch(58.4% 0.185 38.5)

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

#FFC039

Ginger · SandyBrown · Sunflower

HEX
#FFC039
RGB
rgb(255, 192, 57)
HSL
hsl(41, 100%, 61%)
HSB
hsb(41, 78%, 100%)
CMYK
cmyk(0%, 25%, 78%, 0%)
Oklch
oklch(84.4% 0.158 81.7)

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

#CFE0A1

Willow Green · Khaki · Apple Green

HEX
#CFE0A1
RGB
rgb(207, 224, 161)
HSL
hsl(76, 50%, 75%)
HSB
hsb(76, 28%, 88%)
CMYK
cmyk(8%, 0%, 28%, 12%)
Oklch
oklch(87.9% 0.085 120.4)

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

#638655

Celadon · DimGray · Olive Green

HEX
#638655
RGB
rgb(99, 134, 85)
HSL
hsl(103, 22%, 43%)
HSB
hsb(103, 37%, 53%)
CMYK
cmyk(26%, 0%, 37%, 47%)
Oklch
oklch(58.1% 0.082 137.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

450E0D
0D4445

Analogous

450D28
450E0D
452A0D

Triadic

450E0D
0D450E
0E0D45

Split-Comp.

450E0D
0D452A
0D2845

Tetradic

450E0D
28450D
0D4445
2A0D45

Contrast Matrix WCAG 2.1 Contrast

450E0D
D1460B
FFC039
CFE0A1
638655
—
3.5
AA Large
9.7
AAA
11.2
AAA
3.8
AA Large
3.5
AA Large
—
2.8
Fail
3.2
AA Large
1.1
Fail
9.7
AAA
2.8
Fail
—
1.2
Fail
2.5
Fail
11.2
AAA
3.2
AA Large
1.2
Fail
—
2.9
Fail
3.8
AA Large
1.1
Fail
2.5
Fail
2.9
Fail
—
White BG
15.9AAA
4.6AA
1.6Fail
1.4Fail
4.1AA Large
Black BG
1.3Fail
4.6AA
12.9AAA
14.8AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D0D
959419
E4E35A
D6D7B0
727261

Deuteranopia

30350D
9DA71D
E7EC62
D5D4B4
706E64

Tritanopia

420D0D
CA2527
FC7379
D0BCBF
656A6C

Achromatopsia

1E1E1E
696969
C3C3C3
D4D4D4
767676

Shades & Tints Shades & Tints

#450E0D

Dark
Light

#D1460B

Dark
Light

#FFC039

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #450e0d;
  --color-2: #d1460b;
  --color-3: #ffc039;
  --color-4: #cfe0a1;
  --color-5: #638655;
}

SCSS

$color-1: #450e0d;
$color-2: #d1460b;
$color-3: #ffc039;
$color-4: #cfe0a1;
$color-5: #638655;

TAILWIND

colors: {
  'brand-1': '#450e0d',
  'brand-2': '#d1460b',
  'brand-3': '#ffc039',
  'brand-4': '#cfe0a1',
  'brand-5': '#638655',
}

RGB Array

[69, 14, 13], [209, 70, 11], [255, 192, 57], [207, 224, 161], [99, 134, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #450E0D, #D1460B, #FFC039, #CFE0A1, #638655 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #450e0d; --color-2: #d1460b; --color-3: #ffc039; --color-4: #cfe0a1; --color-5: #638655. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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