#CCC53D + #F5A22C + #F58320 + #61633B + #417078 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCC53D

Autumn Sage · GoldenRod · Sunflower

HEX

#CCC53D

RGB

rgb(204, 197, 61)

HSL

hsl(57, 58%, 52%)

HSB

hsb(57, 70%, 80%)

CMYK

cmyk(0%, 3%, 70%, 20%)

Oklch

oklch(80.5% 0.151 106.4)

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

#F5A22C

Ginger · GoldenRod · Warm Sun

HEX

#F5A22C

RGB

rgb(245, 162, 44)

HSL

hsl(35, 91%, 57%)

HSB

hsb(35, 82%, 96%)

CMYK

cmyk(0%, 34%, 82%, 4%)

Oklch

oklch(77.7% 0.156 69.7)

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

#F58320

Tangerine · GoldenRod · Warm Sun

HEX

#F58320

RGB

rgb(245, 131, 32)

HSL

hsl(28, 91%, 54%)

HSB

hsb(28, 87%, 96%)

CMYK

cmyk(0%, 47%, 87%, 4%)

Oklch

oklch(72.4% 0.171 54.4)

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

#61633B

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#61633B

RGB

rgb(97, 99, 59)

HSL

hsl(63, 25%, 31%)

HSB

hsb(63, 40%, 39%)

CMYK

cmyk(2%, 0%, 40%, 61%)

Oklch

oklch(48.8% 0.059 110.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#417078

Slate Blue · DimGray · Mint Ice

HEX

#417078

RGB

rgb(65, 112, 120)

HSL

hsl(189, 30%, 36%)

HSB

hsb(189, 46%, 47%)

CMYK

cmyk(46%, 7%, 0%, 53%)

Oklch

oklch(51.5% 0.053 209.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC53D

3E45CC

Analogous

CC7E3E

CCC53D

8CCC3E

Triadic

CCC53D

3ECCC4

C43ECC

Split-Comp.

CCC53D

3E8CCC

7E3ECC

Tetradic

CCC53D

3ECC7E

3E45CC

CC3E8C

Contrast Matrix WCAG 2.1 Contrast

CCC53D	F5A22C	F58320	61633B	417078
—	1.2 Fail	1.4 Fail	3.5 AA Large	3.0 AA Large
1.2 Fail	—	1.2 Fail	3.0 AA Large	2.6 Fail
1.4 Fail	1.2 Fail	—	2.4 Fail	2.1 Fail
3.5 AA Large	3.0 AA Large	2.4 Fail	—	1.1 Fail
3.0 AA Large	2.6 Fail	2.1 Fail	1.1 Fail	—

White BG

1.8Fail

2.1Fail

2.6Fail

6.3AA

5.5AA

Black BG

11.6AAA

10.1AAA

8.1AAA

3.4AA Large

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C95E

D1D049

C4C338

626245

555676

Deuteranopia

C9CA66

D6DC4F

CAD33E

626247

534F76

Tritanopia

CC787E

F15F64

EF4B4F

614C4E

437574

Achromatopsia

B8B8B8

ADADAD

9A9A9A

5E5E5E

636363

Shades & Tints Shades & Tints

#CCC53D

Dark

Light

#F5A22C

Dark

Light

#F58320

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc53d;
  --color-2: #f5a22c;
  --color-3: #f58320;
  --color-4: #61633b;
  --color-5: #417078;
}

SCSS

$color-1: #ccc53d;
$color-2: #f5a22c;
$color-3: #f58320;
$color-4: #61633b;
$color-5: #417078;

TAILWIND

colors: {
  'brand-1': '#ccc53d',
  'brand-2': '#f5a22c',
  'brand-3': '#f58320',
  'brand-4': '#61633b',
  'brand-5': '#417078',
}

RGB Array

[204, 197, 61], [245, 162, 44], [245, 131, 32], [97, 99, 59], [65, 112, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC53D, #F5A22C, #F58320, #61633B, #417078 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: #ccc53d; --color-2: #f5a22c; --color-3: #f58320; --color-4: #61633b; --color-5: #417078. 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