#F6E12F + #B5E25B + #51B697 + #5B868C + #655681 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F6E12F

Autumn Sage · Gold · Sunflower

HEX

#F6E12F

RGB

rgb(246, 225, 47)

HSL

hsl(54, 92%, 57%)

HSB

hsb(54, 81%, 96%)

CMYK

cmyk(0%, 9%, 81%, 4%)

Oklch

oklch(90.0% 0.178 102.1)

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

#B5E25B

Willow Green · GreenYellow · Apple Green

HEX

#B5E25B

RGB

rgb(181, 226, 91)

HSL

hsl(80, 70%, 62%)

HSB

hsb(80, 60%, 89%)

CMYK

cmyk(20%, 0%, 60%, 11%)

Oklch

oklch(85.4% 0.169 125.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#51B697

Mineral Blue · CadetBlue · Lake Green

HEX

#51B697

RGB

rgb(81, 182, 151)

HSL

hsl(162, 41%, 52%)

HSB

hsb(162, 55%, 71%)

CMYK

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

Oklch

oklch(70.7% 0.106 170.3)

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

#5B868C

Slate Blue · SlateGray · Mint Ice

HEX

#5B868C

RGB

rgb(91, 134, 140)

HSL

hsl(187, 21%, 45%)

HSB

hsb(187, 35%, 55%)

CMYK

cmyk(35%, 4%, 0%, 45%)

Oklch

oklch(59.1% 0.048 206.9)

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

#655681

Deep Indigo · DimGray · Violet

HEX

#655681

RGB

rgb(101, 86, 129)

HSL

hsl(261, 20%, 42%)

HSB

hsb(261, 33%, 51%)

CMYK

cmyk(22%, 33%, 0%, 49%)

Oklch

oklch(48.5% 0.070 299.8)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6E12F

2C41F6

Analogous

F67D2C

F6E12F

A6F62C

Triadic

F6E12F

2CF6E2

E22CF6

Split-Comp.

F6E12F

2CA6F6

7D2CF6

Tetradic

F6E12F

2CF67D

2C41F6

F62CA6

Contrast Matrix WCAG 2.1 Contrast

F6E12F	B5E25B	51B697	5B868C	655681
—	1.1 Fail	1.9 Fail	3.0 AA Large	4.9 AA
1.1 Fail	—	1.6 Fail	2.7 Fail	4.4 AA Large
1.9 Fail	1.6 Fail	—	1.6 Fail	2.7 Fail
3.0 AA Large	2.7 Fail	1.6 Fail	—	1.6 Fail
4.9 AA	4.4 AA Large	2.7 Fail	1.6 Fail	—

White BG

1.3Fail

1.5Fail

2.5Fail

4.0AA Large

6.6AA

Black BG

15.7AAA

14.0AAA

8.5AAA

5.2AA

3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDED5A

C8C97C

7D7E9F

6E6E8B

5F5E77

Deuteranopia

EEF064

C6C384

776FA0

6B688A

5F6074

Tritanopia

F57C84

B7959B

56A4A6

5D8989

646E6D

Achromatopsia

D3D3D3

C5C5C5

949494

7A7A7A

5F5F5F

Shades & Tints Shades & Tints

#F6E12F

Dark

Light

#B5E25B

Dark

Light

#51B697

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6e12f;
  --color-2: #b5e25b;
  --color-3: #51b697;
  --color-4: #5b868c;
  --color-5: #655681;
}

SCSS

$color-1: #f6e12f;
$color-2: #b5e25b;
$color-3: #51b697;
$color-4: #5b868c;
$color-5: #655681;

TAILWIND

colors: {
  'brand-1': '#f6e12f',
  'brand-2': '#b5e25b',
  'brand-3': '#51b697',
  'brand-4': '#5b868c',
  'brand-5': '#655681',
}

RGB Array

[246, 225, 47], [181, 226, 91], [81, 182, 151], [91, 134, 140], [101, 86, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6E12F, #B5E25B, #51B697, #5B868C, #655681 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: #f6e12f; --color-2: #b5e25b; --color-3: #51b697; --color-4: #5b868c; --color-5: #655681. 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