#CF733A + #AD4D3E + #913A47 + #66304C + #3C2945 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CF733A

Tangerine · Chocolate · Warm Sun

HEX

#CF733A

RGB

rgb(207, 115, 58)

HSL

hsl(23, 61%, 52%)

HSB

hsb(23, 72%, 81%)

CMYK

cmyk(0%, 44%, 72%, 19%)

Oklch

oklch(64.9% 0.136 50.1)

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

#AD4D3E

Crimson · Sienna · Passion Red

HEX

#AD4D3E

RGB

rgb(173, 77, 62)

HSL

hsl(8, 47%, 46%)

HSB

hsb(8, 64%, 68%)

CMYK

cmyk(0%, 55%, 64%, 32%)

Oklch

oklch(54.0% 0.129 30.8)

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

#913A47

Crimson · Sienna · Wine Red

HEX

#913A47

RGB

rgb(145, 58, 71)

HSL

hsl(351, 43%, 40%)

HSB

hsb(351, 60%, 57%)

CMYK

cmyk(0%, 60%, 51%, 43%)

Oklch

oklch(47.1% 0.118 13.7)

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

#66304C

Rose Purple · DarkSlateGray · Camellia

HEX

#66304C

RGB

rgb(102, 48, 76)

HSL

hsl(329, 36%, 29%)

HSB

hsb(329, 53%, 40%)

CMYK

cmyk(0%, 53%, 25%, 60%)

Oklch

oklch(39.1% 0.086 349.4)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#3C2945

Dark Plum · DarkSlateGray · Eggplant

HEX

#3C2945

RGB

rgb(60, 41, 69)

HSL

hsl(281, 25%, 22%)

HSB

hsb(281, 41%, 27%)

CMYK

cmyk(13%, 41%, 0%, 73%)

Oklch

oklch(31.6% 0.055 314.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF733A

3A96CF

Analogous

CF3A4B

CF733A

CFBE3A

Triadic

CF733A

3ACF73

733ACF

Split-Comp.

CF733A

3ACFBE

3A4BCF

Tetradic

CF733A

4BCF3A

3A96CF

BE3ACF

Contrast Matrix WCAG 2.1 Contrast

CF733A	AD4D3E	913A47	66304C	3C2945
—	1.6 Fail	2.1 Fail	2.9 Fail	3.9 AA Large
1.6 Fail	—	1.3 Fail	1.9 Fail	2.4 Fail
2.1 Fail	1.3 Fail	—	1.4 Fail	1.8 Fail
2.9 Fail	1.9 Fail	1.4 Fail	—	1.3 Fail
3.9 AA Large	2.4 Fail	1.8 Fail	1.3 Fail	—

White BG

3.4AA Large

5.4AA

7.2AAA

10.0AAA

13.2AAA

Black BG

6.2AA

3.9AA Large

2.9Fail

2.1Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A648

838342

6B6B44

4F4E45

34343E

Deuteranopia

ADB34B

899043

707743

525644

35363D

Tritanopia

CA5355

A84445

8D4141

63403F

3B3938

Achromatopsia

888888

686868

555555

434343

323232

Shades & Tints Shades & Tints

#CF733A

Dark

Light

#AD4D3E

Dark

Light

#913A47

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf733a;
  --color-2: #ad4d3e;
  --color-3: #913a47;
  --color-4: #66304c;
  --color-5: #3c2945;
}

SCSS

$color-1: #cf733a;
$color-2: #ad4d3e;
$color-3: #913a47;
$color-4: #66304c;
$color-5: #3c2945;

TAILWIND

colors: {
  'brand-1': '#cf733a',
  'brand-2': '#ad4d3e',
  'brand-3': '#913a47',
  'brand-4': '#66304c',
  'brand-5': '#3c2945',
}

RGB Array

[207, 115, 58], [173, 77, 62], [145, 58, 71], [102, 48, 76], [60, 41, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF733A, #AD4D3E, #913A47, #66304C, #3C2945 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: #cf733a; --color-2: #ad4d3e; --color-3: #913a47; --color-4: #66304c; --color-5: #3c2945. 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