#CFCF54 + #A1A173 + #F2F290 + #638D89 + #63C4B9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CFCF54

Autumn Sage · BurlyWood · Sunflower

HEX

#CFCF54

RGB

rgb(207, 207, 84)

HSL

hsl(60, 56%, 57%)

HSB

hsb(60, 59%, 81%)

CMYK

cmyk(0%, 0%, 59%, 19%)

Oklch

oklch(83.1% 0.144 109.2)

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

#A1A173

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A1A173

RGB

rgb(161, 161, 115)

HSL

hsl(60, 20%, 54%)

HSB

hsb(60, 29%, 63%)

CMYK

cmyk(0%, 0%, 29%, 37%)

Oklch

oklch(69.7% 0.063 107.9)

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

#F2F290

Fresh Green · Khaki · Lemon Cream

HEX

#F2F290

RGB

rgb(242, 242, 144)

HSL

hsl(60, 79%, 76%)

HSB

hsb(60, 40%, 95%)

CMYK

cmyk(0%, 0%, 40%, 5%)

Oklch

oklch(94.0% 0.121 108.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#638D89

Mineral Blue · SlateGray · Mint Ice

HEX

#638D89

RGB

rgb(99, 141, 137)

HSL

hsl(174, 18%, 47%)

HSB

hsb(174, 30%, 55%)

CMYK

cmyk(30%, 0%, 3%, 45%)

Oklch

oklch(61.1% 0.047 188.6)

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

#63C4B9

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#63C4B9

RGB

rgb(99, 196, 185)

HSL

hsl(173, 45%, 58%)

HSB

hsb(173, 49%, 77%)

CMYK

cmyk(49%, 0%, 6%, 23%)

Oklch

oklch(75.8% 0.093 185.7)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFCF54

5454CF

Analogous

CF9154

CFCF54

91CF54

Triadic

CFCF54

54CFCF

CF54CF

Split-Comp.

CFCF54

5491CF

9154CF

Tetradic

CFCF54

54CF91

5454CF

CF5491

Contrast Matrix WCAG 2.1 Contrast

CFCF54	A1A173	F2F290	638D89	63C4B9
—	1.6 Fail	1.4 Fail	2.2 Fail	1.3 Fail
1.6 Fail	—	2.3 Fail	1.4 Fail	1.3 Fail
1.4 Fail	2.3 Fail	—	3.1 AA Large	1.8 Fail
2.2 Fail	1.4 Fail	3.1 AA Large	—	1.8 Fail
1.3 Fail	1.3 Fail	1.8 Fail	1.8 Fail	—

White BG

1.7Fail

2.7Fail

1.2Fail

3.7AA Large

2.1Fail

Black BG

12.7AAA

7.9AAA

17.9AAA

5.7AA

10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCF72

A1A17E

F2F2A8

75768A

8D8EBC

Deuteranopia

CFCF79

A1A181

F2F2AD

73708A

8780BC

Tritanopia

CF898E

A18789

F2BABF

658B8B

68BEBE

Achromatopsia

C1C1C1

9C9C9C

E7E7E7

808080

A6A6A6

Shades & Tints Shades & Tints

#CFCF54

Dark

Light

#A1A173

Dark

Light

#F2F290

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfcf54;
  --color-2: #a1a173;
  --color-3: #f2f290;
  --color-4: #638d89;
  --color-5: #63c4b9;
}

SCSS

$color-1: #cfcf54;
$color-2: #a1a173;
$color-3: #f2f290;
$color-4: #638d89;
$color-5: #63c4b9;

TAILWIND

colors: {
  'brand-1': '#cfcf54',
  'brand-2': '#a1a173',
  'brand-3': '#f2f290',
  'brand-4': '#638d89',
  'brand-5': '#63c4b9',
}

RGB Array

[207, 207, 84], [161, 161, 115], [242, 242, 144], [99, 141, 137], [99, 196, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFCF54, #A1A173, #F2F290, #638D89, #63C4B9 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: #cfcf54; --color-2: #a1a173; --color-3: #f2f290; --color-4: #638d89; --color-5: #63c4b9. 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