#41AFA9 + #ABD35B + #C8DE29 + #D8E867 + #7B6C6D · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#41AFA9

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#41AFA9

RGB

rgb(65, 175, 169)

HSL

hsl(177, 46%, 47%)

HSB

hsb(177, 63%, 69%)

CMYK

cmyk(63%, 0%, 3%, 31%)

Oklch

oklch(69.0% 0.099 190.0)

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

#ABD35B

Grass Green · GreenYellow · Olive Green

HEX

#ABD35B

RGB

rgb(171, 211, 91)

HSL

hsl(80, 58%, 59%)

HSB

hsb(80, 57%, 83%)

CMYK

cmyk(19%, 0%, 57%, 17%)

Oklch

oklch(81.3% 0.154 125.1)

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

#C8DE29

Autumn Sage · GreenYellow · Sunflower

HEX

#C8DE29

RGB

rgb(200, 222, 41)

HSL

hsl(67, 73%, 52%)

HSB

hsb(67, 82%, 87%)

CMYK

cmyk(10%, 0%, 82%, 13%)

Oklch

oklch(85.5% 0.188 116.9)

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

#D8E867

Fresh Green · Khaki · Sunflower

HEX

#D8E867

RGB

rgb(216, 232, 103)

HSL

hsl(67, 74%, 66%)

HSB

hsb(67, 56%, 91%)

CMYK

cmyk(7%, 0%, 56%, 9%)

Oklch

oklch(89.4% 0.154 115.5)

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

#7B6C6D

Ink Gray · DimGray · Warm Gray

HEX

#7B6C6D

RGB

rgb(123, 108, 109)

HSL

hsl(356, 6%, 45%)

HSB

hsb(356, 12%, 48%)

CMYK

cmyk(0%, 12%, 11%, 52%)

Oklch

oklch(54.6% 0.019 13.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

41AFA9

AF4146

Analogous

41AF72

41AFA9

417DAF

Triadic

41AFA9

A941AF

AFA941

Split-Comp.

41AFA9

AF417D

AF7241

Tetradic

41AFA9

7241AF

AF4146

7DAF41

Contrast Matrix WCAG 2.1 Contrast

41AFA9	ABD35B	C8DE29	D8E867	7B6C6D
—	1.5 Fail	1.8 Fail	2.0 Fail	1.9 Fail
1.5 Fail	—	1.1 Fail	1.3 Fail	2.9 Fail
1.8 Fail	1.1 Fail	—	1.1 Fail	3.3 AA Large
2.0 Fail	1.3 Fail	1.1 Fail	—	3.7 AA Large
1.9 Fail	2.9 Fail	3.3 AA Large	3.7 AA Large	—

White BG

2.6Fail

1.7Fail

1.5Fail

1.3Fail

5.0AA

Black BG

7.9AAA

12.2AAA

13.9AAA

15.7AAA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

7172AA

BCBD78

D2D255

DFDF86

75746D

Deuteranopia

6A62AB

BAB77F

D0CF5F

DEDD8E

75776D

Tritanopia

47ACAC

AD8F94

C9777F

D99FA4

7A6D6D

Achromatopsia

8D8D8D

B9B9B9

C3C3C3

D5D5D5

717171

Shades & Tints Shades & Tints

#41AFA9

Dark

Light

#ABD35B

Dark

Light

#C8DE29

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #41afa9;
  --color-2: #abd35b;
  --color-3: #c8de29;
  --color-4: #d8e867;
  --color-5: #7b6c6d;
}

SCSS

$color-1: #41afa9;
$color-2: #abd35b;
$color-3: #c8de29;
$color-4: #d8e867;
$color-5: #7b6c6d;

TAILWIND

colors: {
  'brand-1': '#41afa9',
  'brand-2': '#abd35b',
  'brand-3': '#c8de29',
  'brand-4': '#d8e867',
  'brand-5': '#7b6c6d',
}

RGB Array

[65, 175, 169], [171, 211, 91], [200, 222, 41], [216, 232, 103], [123, 108, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #41AFA9, #ABD35B, #C8DE29, #D8E867, #7B6C6D 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: #41afa9; --color-2: #abd35b; --color-3: #c8de29; --color-4: #d8e867; --color-5: #7b6c6d. 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 warm-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