← Back to Editor

#54361D · #092E2D · #1D856B · #24B4A0 · #F0E390

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#54361D

Tangerine · DarkOliveGreen · Cinnamon

HEX
#54361D
RGB
rgb(84, 54, 29)
HSL
hsl(27, 49%, 22%)
HSB
hsb(27, 65%, 33%)
CMYK
cmyk(0%, 36%, 65%, 67%)
Oklch
oklch(36.3% 0.057 59.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#092E2D

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#092E2D
RGB
rgb(9, 46, 45)
HSL
hsl(178, 67%, 11%)
HSB
hsb(178, 80%, 18%)
CMYK
cmyk(80%, 0%, 2%, 82%)
Oklch
oklch(27.5% 0.041 192.5)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1D856B

Mineral Blue · SeaGreen · Mint Ice

HEX
#1D856B
RGB
rgb(29, 133, 107)
HSL
hsl(165, 64%, 32%)
HSB
hsb(165, 78%, 52%)
CMYK
cmyk(78%, 0%, 20%, 48%)
Oklch
oklch(55.3% 0.100 171.4)

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

#24B4A0

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#24B4A0
RGB
rgb(36, 180, 160)
HSL
hsl(172, 67%, 42%)
HSB
hsb(172, 80%, 71%)
CMYK
cmyk(80%, 0%, 11%, 29%)
Oklch
oklch(69.4% 0.118 180.6)

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

#F0E390

Fresh Green · Khaki · Sunflower

HEX
#F0E390
RGB
rgb(240, 227, 144)
HSL
hsl(52, 76%, 75%)
HSB
hsb(52, 40%, 94%)
CMYK
cmyk(0%, 5%, 40%, 6%)
Oklch
oklch(90.8% 0.105 100.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

54361D
1D3B54

Analogous

541D1F
54361D
54511D

Triadic

54361D
1D5435
351D54

Split-Comp.

54361D
1D5451
1D1F54

Tetradic

54361D
1F541D
1D3B54
511D54

Contrast Matrix WCAG 2.1 Contrast

54361D
092E2D
1D856B
24B4A0
F0E390
—
1.3
Fail
2.4
Fail
4.2
AA Large
8.4
AAA
1.3
Fail
—
3.2
AA Large
5.6
AA
11.2
AAA
2.4
Fail
3.2
AA Large
—
1.8
Fail
3.5
AA Large
4.2
AA Large
5.6
AA
1.8
Fail
—
2.0
Fail
8.4
AAA
11.2
AAA
3.5
AA Large
2.0
Fail
—
White BG
10.9AAA
14.6AAA
4.5AA
2.6Fail
1.3Fail
Black BG
1.9Fail
1.4Fail
4.6AA
8.1AAA
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

474723
19192D
4A4B71
6264A5
EAEAA4

Deuteranopia

494B25
17142D
443C73
5A4FA6
EBECA9

Tritanopia

532829
0B2D2D
227677
2BA9AA
EFB4B7

Achromatopsia

3C3C3C
232323
636363
878787
DDDDDD

Shades & Tints Shades & Tints

#54361D

Dark
Light

#092E2D

Dark
Light

#1D856B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #54361d;
  --color-2: #092e2d;
  --color-3: #1d856b;
  --color-4: #24b4a0;
  --color-5: #f0e390;
}

SCSS

$color-1: #54361d;
$color-2: #092e2d;
$color-3: #1d856b;
$color-4: #24b4a0;
$color-5: #f0e390;

TAILWIND

colors: {
  'brand-1': '#54361d',
  'brand-2': '#092e2d',
  'brand-3': '#1d856b',
  'brand-4': '#24b4a0',
  'brand-5': '#f0e390',
}

RGB Array

[84, 54, 29], [9, 46, 45], [29, 133, 107], [36, 180, 160], [240, 227, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #54361D, #092E2D, #1D856B, #24B4A0, #F0E390 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #54361d; --color-2: #092e2d; --color-3: #1d856b; --color-4: #24b4a0; --color-5: #f0e390. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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