#CCA956 + #703951 + #275274 + #186F6F + #29C7A7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCA956

Ginger · SandyBrown · Sunflower

HEX

#CCA956

RGB

rgb(204, 169, 86)

HSL

hsl(42, 54%, 57%)

HSB

hsb(42, 58%, 80%)

CMYK

cmyk(0%, 17%, 58%, 20%)

Oklch

oklch(74.9% 0.110 86.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#703951

Dark Violet · DimGray · Camellia

HEX

#703951

RGB

rgb(112, 57, 81)

HSL

hsl(334, 33%, 33%)

HSB

hsb(334, 49%, 44%)

CMYK

cmyk(0%, 49%, 28%, 56%)

Oklch

oklch(42.2% 0.083 353.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#275274

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#275274

RGB

rgb(39, 82, 116)

HSL

hsl(206, 50%, 30%)

HSB

hsb(206, 66%, 45%)

CMYK

cmyk(66%, 29%, 0%, 55%)

Oklch

oklch(42.4% 0.074 244.7)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#186F6F

Lake Blue · Teal · Mint Ice

HEX

#186F6F

RGB

rgb(24, 111, 111)

HSL

hsl(180, 64%, 26%)

HSB

hsb(180, 78%, 44%)

CMYK

cmyk(78%, 0%, 0%, 56%)

Oklch

oklch(49.4% 0.077 194.9)

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

#29C7A7

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#29C7A7

RGB

rgb(41, 199, 167)

HSL

hsl(168, 66%, 47%)

HSB

hsb(168, 79%, 78%)

CMYK

cmyk(79%, 0%, 16%, 22%)

Oklch

oklch(74.5% 0.133 174.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCA956

567ACD

Analogous

CD6E56

CCA956

B5CD56

Triadic

CCA956

56CDA9

A956CD

Split-Comp.

CCA956

56B5CD

6E56CD

Tetradic

CCA956

56CD6E

567ACD

CD56B5

Contrast Matrix WCAG 2.1 Contrast

CCA956	703951	275274	186F6F	29C7A7
—	3.9 AA Large	3.7 AA Large	2.6 Fail	1.0 Fail
3.9 AA Large	—	1.1 Fail	1.5 Fail	4.1 AA Large
3.7 AA Large	1.1 Fail	—	1.4 Fail	3.9 AA Large
2.6 Fail	1.5 Fail	1.4 Fail	—	2.8 Fail
1.0 Fail	4.1 AA Large	3.9 AA Large	2.8 Fail	—

White BG

2.2Fail

8.8AAA

8.3AAA

5.9AA

2.1Fail

Black BG

9.4AAA

2.4Fail

2.5Fail

3.5AA Large

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD6A

58584B

3A3A6C

3E3E6F

6D6FAF

Deuteranopia

BFC16F

5B5F4A

37346A

39326F

6458B1

Tritanopia

CA7A7D

6D4746

296564

1C6F6F

31B5B6

Achromatopsia

AAAAAA

4C4C4C

494949

555555

949494

Shades & Tints Shades & Tints

#CCA956

Dark

Light

#703951

Dark

Light

#275274

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cca956;
  --color-2: #703951;
  --color-3: #275274;
  --color-4: #186f6f;
  --color-5: #29c7a7;
}

SCSS

$color-1: #cca956;
$color-2: #703951;
$color-3: #275274;
$color-4: #186f6f;
$color-5: #29c7a7;

TAILWIND

colors: {
  'brand-1': '#cca956',
  'brand-2': '#703951',
  'brand-3': '#275274',
  'brand-4': '#186f6f',
  'brand-5': '#29c7a7',
}

RGB Array

[204, 169, 86], [112, 57, 81], [39, 82, 116], [24, 111, 111], [41, 199, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCA956, #703951, #275274, #186F6F, #29C7A7 is ideal for: tech websites, dark mode UIs, game UIs. 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: #cca956; --color-2: #703951; --color-3: #275274; --color-4: #186f6f; --color-5: #29c7a7. 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. 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