#F4A726 + #BB5C32 + #CEB84B + #3C2133 + #271C32 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F4A726

Ginger · GoldenRod · Warm Sun

HEX

#F4A726

RGB

rgb(244, 167, 38)

HSL

hsl(38, 90%, 55%)

HSB

hsb(38, 84%, 96%)

CMYK

cmyk(0%, 32%, 84%, 4%)

Oklch

oklch(78.4% 0.157 73.7)

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

#BB5C32

Tangerine · Sienna · Amber Brown

HEX

#BB5C32

RGB

rgb(187, 92, 50)

HSL

hsl(18, 58%, 46%)

HSB

hsb(18, 73%, 73%)

CMYK

cmyk(0%, 51%, 73%, 27%)

Oklch

oklch(58.3% 0.135 43.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#CEB84B

Autumn Sage · SandyBrown · Sunflower

HEX

#CEB84B

RGB

rgb(206, 184, 75)

HSL

hsl(50, 57%, 55%)

HSB

hsb(50, 64%, 81%)

CMYK

cmyk(0%, 11%, 64%, 19%)

Oklch

oklch(78.1% 0.130 97.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#3C2133

Rose Purple · DarkSlateGray · Raspberry

HEX

#3C2133

RGB

rgb(60, 33, 51)

HSL

hsl(320, 29%, 18%)

HSB

hsb(320, 45%, 24%)

CMYK

cmyk(0%, 45%, 15%, 76%)

Oklch

oklch(29.0% 0.050 340.5)

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

#271C32

Dark Plum · DarkSlateGray · Dark Purple

HEX

#271C32

RGB

rgb(39, 28, 50)

HSL

hsl(270, 28%, 15%)

HSB

hsb(270, 44%, 20%)

CMYK

cmyk(22%, 44%, 0%, 80%)

Oklch

oklch(25.1% 0.043 306.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4A726

2571F4

Analogous

F44125

F4A726

D8F425

Triadic

F4A726

25F4A8

A825F4

Split-Comp.

F4A726

25D8F4

4125F4

Tetradic

F4A726

25F441

2571F4

F425D8

Contrast Matrix WCAG 2.1 Contrast

F4A726	BB5C32	CEB84B	3C2133	271C32
—	2.2 Fail	1.0 Fail	7.1 AAA	8.0 AAA
2.2 Fail	—	2.3 Fail	3.2 AA Large	3.6 AA Large
1.0 Fail	2.3 Fail	—	7.3 AAA	8.1 AAA
7.1 AAA	3.2 AA Large	7.3 AAA	—	1.1 Fail
8.0 AAA	3.6 AA Large	8.1 AAA	1.1 Fail	—

White BG

2.0Fail

4.5AA Large

2.0Fail

14.4AAA

16.2AAA

Black BG

10.4AAA

4.7AA

10.6AAA

1.5Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D245

92913C

C4C465

30302F

22222D

Deuteranopia

D7DD4D

979F3F

C6C76C

32342E

23242B

Tritanopia

F05E63

B64446

CD7A7F

3B2B2A

262828

Achromatopsia

AFAFAF

747474

B2B2B2

2B2B2B

222222

Shades & Tints Shades & Tints

#F4A726

Dark

Light

#BB5C32

Dark

Light

#CEB84B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4a726;
  --color-2: #bb5c32;
  --color-3: #ceb84b;
  --color-4: #3c2133;
  --color-5: #271c32;
}

SCSS

$color-1: #f4a726;
$color-2: #bb5c32;
$color-3: #ceb84b;
$color-4: #3c2133;
$color-5: #271c32;

TAILWIND

colors: {
  'brand-1': '#f4a726',
  'brand-2': '#bb5c32',
  'brand-3': '#ceb84b',
  'brand-4': '#3c2133',
  'brand-5': '#271c32',
}

RGB Array

[244, 167, 38], [187, 92, 50], [206, 184, 75], [60, 33, 51], [39, 28, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F4A726, #BB5C32, #CEB84B, #3C2133, #271C32 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: #f4a726; --color-2: #bb5c32; --color-3: #ceb84b; --color-4: #3c2133; --color-5: #271c32. 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 cool-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