#F1F138 + #C8DA46 + #98C259 + #5B9E78 + #5F806D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F1F138

Autumn Sage · Yellow · Sunflower

HEX

#F1F138

RGB

rgb(241, 241, 56)

HSL

hsl(60, 87%, 58%)

HSB

hsb(60, 77%, 95%)

CMYK

cmyk(0%, 0%, 77%, 5%)

Oklch

oklch(92.9% 0.189 109.6)

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

#C8DA46

Autumn Sage · GreenYellow · Sunflower

HEX

#C8DA46

RGB

rgb(200, 218, 70)

HSL

hsl(67, 67%, 56%)

HSB

hsb(67, 68%, 85%)

CMYK

cmyk(8%, 0%, 68%, 15%)

Oklch

oklch(84.8% 0.168 116.1)

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

#98C259

Grass Green · DarkSeaGreen · Olive Green

HEX

#98C259

RGB

rgb(152, 194, 89)

HSL

hsl(84, 46%, 55%)

HSB

hsb(84, 54%, 76%)

CMYK

cmyk(22%, 0%, 54%, 24%)

Oklch

oklch(76.1% 0.142 127.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#5B9E78

Celadon · MediumSeaGreen · Olive Green

HEX

#5B9E78

RGB

rgb(91, 158, 120)

HSL

hsl(146, 27%, 49%)

HSB

hsb(146, 42%, 62%)

CMYK

cmyk(42%, 0%, 24%, 38%)

Oklch

oklch(64.4% 0.090 157.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#5F806D

Celadon · DimGray · Olive Green

HEX

#5F806D

RGB

rgb(95, 128, 109)

HSL

hsl(145, 15%, 44%)

HSB

hsb(145, 26%, 50%)

CMYK

cmyk(26%, 0%, 15%, 50%)

Oklch

oklch(56.9% 0.048 159.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1F138

3737F1

Analogous

F19437

F1F138

94F137

Triadic

F1F138

37F1F1

F137F1

Split-Comp.

F1F138

3794F1

9437F1

Tetradic

F1F138

37F194

3737F1

F13794

Contrast Matrix WCAG 2.1 Contrast

F1F138	C8DA46	98C259	5B9E78	5F806D
—	1.3 Fail	1.7 Fail	2.6 Fail	3.6 AA Large
1.3 Fail	—	1.3 Fail	2.1 Fail	2.8 Fail
1.7 Fail	1.3 Fail	—	1.5 Fail	2.1 Fail
2.6 Fail	2.1 Fail	1.5 Fail	—	1.4 Fail
3.6 AA Large	2.8 Fail	2.1 Fail	1.4 Fail	—

White BG

1.2Fail

1.5Fail

2.1Fail

3.2AA Large

4.4AA Large

Black BG

17.4AAA

13.6AAA

10.2AAA

6.6AA

4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F165

D0D06A

AAAB72

787981

6D6E72

Deuteranopia

F1F170

CFCD72

A8A579

746F83

6B6973

Tritanopia

F18890

C9868C

9A868B

5E888A

617576

Achromatopsia

DCDCDC

C4C4C4

A9A9A9

868686

747474

Shades & Tints Shades & Tints

#F1F138

Dark

Light

#C8DA46

Dark

Light

#98C259

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1f138;
  --color-2: #c8da46;
  --color-3: #98c259;
  --color-4: #5b9e78;
  --color-5: #5f806d;
}

SCSS

$color-1: #f1f138;
$color-2: #c8da46;
$color-3: #98c259;
$color-4: #5b9e78;
$color-5: #5f806d;

TAILWIND

colors: {
  'brand-1': '#f1f138',
  'brand-2': '#c8da46',
  'brand-3': '#98c259',
  'brand-4': '#5b9e78',
  'brand-5': '#5f806d',
}

RGB Array

[241, 241, 56], [200, 218, 70], [152, 194, 89], [91, 158, 120], [95, 128, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1F138, #C8DA46, #98C259, #5B9E78, #5F806D 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: #f1f138; --color-2: #c8da46; --color-3: #98c259; --color-4: #5b9e78; --color-5: #5f806d. 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