← Back to Editor

#2E313B · #6BBCBD · #B5AA82 · #D99B45 · #ED8840

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2E313B

Indigo · DarkSlateGray · Prussian Blue

HEX
#2E313B
RGB
rgb(46, 49, 59)
HSL
hsl(226, 12%, 21%)
HSB
hsb(226, 22%, 23%)
CMYK
cmyk(22%, 17%, 0%, 77%)
Oklch
oklch(31.4% 0.018 272.1)

TraditionalIndigo」· PaintPrussian Blue」· Creative Blush Sunrise

#6BBCBD

Slate Blue · MediumAquaMarine · Lake Green

HEX
#6BBCBD
RGB
rgb(107, 188, 189)
HSL
hsl(181, 38%, 58%)
HSB
hsb(181, 43%, 74%)
CMYK
cmyk(43%, 1%, 0%, 26%)
Oklch
oklch(74.4% 0.080 196.6)

TraditionalSlate Blue」· PaintLake Green」· Creative Blush Sunrise

#B5AA82

Ginger · Tan · Sunflower

HEX
#B5AA82
RGB
rgb(181, 170, 130)
HSL
hsl(47, 26%, 61%)
HSB
hsb(47, 28%, 71%)
CMYK
cmyk(0%, 6%, 28%, 29%)
Oklch
oklch(73.7% 0.056 94.5)

TraditionalGinger」· PaintSunflower」· Creative Lemon Fizz

#D99B45

Ginger · GoldenRod · Warm Sun

HEX
#D99B45
RGB
rgb(217, 155, 69)
HSL
hsl(35, 66%, 56%)
HSB
hsb(35, 68%, 85%)
CMYK
cmyk(0%, 29%, 68%, 15%)
Oklch
oklch(73.4% 0.125 72.3)

TraditionalGinger」· PaintWarm Sun」· Creative Blush Sunrise

#ED8840

Tangerine · Coral · Warm Sun

HEX
#ED8840
RGB
rgb(237, 136, 64)
HSL
hsl(25, 83%, 59%)
HSB
hsb(25, 73%, 93%)
CMYK
cmyk(0%, 43%, 73%, 7%)
Oklch
oklch(72.4% 0.150 53.1)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E313B
3C392F

Analogous

2F393C
2E313B
332F3C

Triadic

2E313B
3C2F32
323C2F

Split-Comp.

2E313B
3C332F
393C2F

Tetradic

2E313B
3C2F39
3C392F
2F3C33

Contrast Matrix WCAG 2.1 Contrast

2E313B
6BBCBD
B5AA82
D99B45
ED8840
5.9
AA
5.6
AA
5.4
AA
5.1
AA
5.9
AA
1.1
Fail
1.1
Fail
1.2
Fail
5.6
AA
1.1
Fail
1.0
Fail
1.1
Fail
5.4
AA
1.1
Fail
1.0
Fail
1.1
Fail
5.1
AA
1.2
Fail
1.1
Fail
1.1
Fail
White BG
13.0AAA
2.2Fail
2.3Fail
2.4Fail
2.6Fail
Black BG
1.6Fail
9.6AAA
9.0AAA
8.7AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F39
8E8FBD
B0B08C
BEBE5A
C1C051

Deuteranopia

2F2F38
8983BD
B1B28E
C2C65F
C7CF56

Tritanopia

2E3736
6FBDBD
B49395
D66A6E
E85F62

Achromatopsia

313131
A4A4A4
A9A9A9
A4A4A4
9E9E9E

Shades & Tints Shades & Tints

#2E313B

Dark
Light

#6BBCBD

Dark
Light

#B5AA82

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e313b;
  --color-2: #6bbcbd;
  --color-3: #b5aa82;
  --color-4: #d99b45;
  --color-5: #ed8840;
}

SCSS

$color-1: #2e313b;
$color-2: #6bbcbd;
$color-3: #b5aa82;
$color-4: #d99b45;
$color-5: #ed8840;

TAILWIND

colors: {
  'brand-1': '#2e313b',
  'brand-2': '#6bbcbd',
  'brand-3': '#b5aa82',
  'brand-4': '#d99b45',
  'brand-5': '#ed8840',
}

RGB Array

[46, 49, 59], [107, 188, 189], [181, 170, 130], [217, 155, 69], [237, 136, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E313B, #6BBCBD, #B5AA82, #D99B45, #ED8840 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: #2e313b; --color-2: #6bbcbd; --color-3: #b5aa82; --color-4: #d99b45; --color-5: #ed8840. 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