← Back to Editor

#2D6E68 · #A9665D · #C4845E · #C6995E · #E5555E

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

#2D6E68

Mineral Blue · SeaGreen · Mint Ice

HEX
#2D6E68
RGB
rgb(45, 110, 104)
HSL
hsl(174, 42%, 30%)
HSB
hsb(174, 59%, 43%)
CMYK
cmyk(59%, 0%, 5%, 57%)
Oklch
oklch(49.5% 0.067 187.0)

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

#A9665D

Crimson · Sienna · Passion Red

HEX
#A9665D
RGB
rgb(169, 102, 93)
HSL
hsl(7, 31%, 51%)
HSB
hsb(7, 45%, 66%)
CMYK
cmyk(0%, 40%, 45%, 34%)
Oklch
oklch(58.2% 0.088 28.3)

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

#C4845E

Tangerine · DarkSalmon · Warm Sun

HEX
#C4845E
RGB
rgb(196, 132, 94)
HSL
hsl(22, 46%, 57%)
HSB
hsb(22, 52%, 77%)
CMYK
cmyk(0%, 33%, 52%, 23%)
Oklch
oklch(67.0% 0.095 51.2)

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

#C6995E

Ginger · DarkSalmon · Warm Sun

HEX
#C6995E
RGB
rgb(198, 153, 94)
HSL
hsl(34, 48%, 57%)
HSB
hsb(34, 53%, 78%)
CMYK
cmyk(0%, 23%, 53%, 22%)
Oklch
oklch(71.2% 0.093 72.9)

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

#E5555E

Peach Pink · Tomato · Coral Red

HEX
#E5555E
RGB
rgb(229, 85, 94)
HSL
hsl(356, 73%, 62%)
HSB
hsb(356, 63%, 90%)
CMYK
cmyk(0%, 63%, 59%, 10%)
Oklch
oklch(64.3% 0.179 20.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D6E68
6D2C33

Analogous

2C6D46
2D6E68
2C536D

Triadic

2D6E68
662C6D
6D662C

Split-Comp.

2D6E68
6D2C53
6D462C

Tetradic

2D6E68
462C6D
6D2C33
536D2C

Contrast Matrix WCAG 2.1 Contrast

2D6E68
A9665D
C4845E
C6995E
E5555E
—
1.3
Fail
1.9
Fail
2.3
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.7
Fail
1.2
Fail
1.9
Fail
1.4
Fail
—
1.2
Fail
1.2
Fail
2.3
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
1.6
Fail
1.2
Fail
1.2
Fail
1.4
Fail
—
White BG
5.9AA
4.4AA Large
3.1AA Large
2.6Fail
3.6AA Large
Black BG
3.5AA Large
4.7AA
6.8AA
8.1AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494A69
8C8B5F
A8A867
B3B26C
A7A55C

Deuteranopia

45416A
909560
ACB169
B5B970
AFBA5B

Tritanopia

306B6B
A66161
C16E70
C4787A
DE5A5A

Achromatopsia

5A5A5A
797979
939393
A0A0A0
818181

Shades & Tints Shades & Tints

#2D6E68

Dark
Light

#A9665D

Dark
Light

#C4845E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d6e68;
  --color-2: #a9665d;
  --color-3: #c4845e;
  --color-4: #c6995e;
  --color-5: #e5555e;
}

SCSS

$color-1: #2d6e68;
$color-2: #a9665d;
$color-3: #c4845e;
$color-4: #c6995e;
$color-5: #e5555e;

TAILWIND

colors: {
  'brand-1': '#2d6e68',
  'brand-2': '#a9665d',
  'brand-3': '#c4845e',
  'brand-4': '#c6995e',
  'brand-5': '#e5555e',
}

RGB Array

[45, 110, 104], [169, 102, 93], [196, 132, 94], [198, 153, 94], [229, 85, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D6E68, #A9665D, #C4845E, #C6995E, #E5555E 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: #2d6e68; --color-2: #a9665d; --color-3: #c4845e; --color-4: #c6995e; --color-5: #e5555e. 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