#F69C4C + #95B16F + #24A893 + #1F7D71 + #6C5740 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F69C4C

Apricot · SandyBrown · Warm Sun

HEX

#F69C4C

RGB

rgb(246, 156, 76)

HSL

hsl(28, 90%, 63%)

HSB

hsb(28, 69%, 96%)

CMYK

cmyk(0%, 37%, 69%, 4%)

Oklch

oklch(77.0% 0.143 59.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#95B16F

Grass Green · DarkSeaGreen · Olive Green

HEX

#95B16F

RGB

rgb(149, 177, 111)

HSL

hsl(85, 30%, 56%)

HSB

hsb(85, 37%, 69%)

CMYK

cmyk(16%, 0%, 37%, 31%)

Oklch

oklch(72.3% 0.095 127.3)

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

#24A893

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#24A893

RGB

rgb(36, 168, 147)

HSL

hsl(170, 65%, 40%)

HSB

hsb(170, 79%, 66%)

CMYK

cmyk(79%, 0%, 13%, 34%)

Oklch

oklch(65.9% 0.113 178.9)

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

#1F7D71

Mineral Blue · SeaGreen · Mint Ice

HEX

#1F7D71

RGB

rgb(31, 125, 113)

HSL

hsl(172, 60%, 31%)

HSB

hsb(172, 75%, 49%)

CMYK

cmyk(75%, 0%, 10%, 51%)

Oklch

oklch(53.4% 0.086 182.4)

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

#6C5740

Ochre · DarkOliveGreen · Amber Brown

HEX

#6C5740

RGB

rgb(108, 87, 64)

HSL

hsl(31, 26%, 34%)

HSB

hsb(31, 41%, 42%)

CMYK

cmyk(0%, 19%, 41%, 58%)

Oklch

oklch(47.2% 0.044 69.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F69C4C

4CA6F6

Analogous

F64C51

F69C4C

F6F04C

Triadic

F69C4C

4CF69B

9B4CF6

Split-Comp.

F69C4C

4CF6F0

4C51F6

Tetradic

F69C4C

51F64C

4CA6F6

F04CF6

Contrast Matrix WCAG 2.1 Contrast

F69C4C	95B16F	24A893	1F7D71	6C5740
—	1.1 Fail	1.4 Fail	2.3 Fail	3.2 AA Large
1.1 Fail	—	1.2 Fail	2.1 Fail	2.9 Fail
1.4 Fail	1.2 Fail	—	1.7 Fail	2.3 Fail
2.3 Fail	2.1 Fail	1.7 Fail	—	1.4 Fail
3.2 AA Large	2.9 Fail	2.3 Fail	1.4 Fail	—

White BG

2.1Fail

2.4Fail

3.0Fail

5.0AA

6.8AA

Black BG

9.8AAA

8.8AAA

7.1AAA

4.2AA Large

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCE5F

A1A17F

5D5E98

484974

636346

Deuteranopia

D4DB64

A09D83

564C99

423B75

646647

Tritanopia

F26F72

968C8E

2B9C9D

247677

6B4A4B

Achromatopsia

AEAEAE

A1A1A1

7E7E7E

606060

5B5B5B

Shades & Tints Shades & Tints

#F69C4C

Dark

Light

#95B16F

Dark

Light

#24A893

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f69c4c;
  --color-2: #95b16f;
  --color-3: #24a893;
  --color-4: #1f7d71;
  --color-5: #6c5740;
}

SCSS

$color-1: #f69c4c;
$color-2: #95b16f;
$color-3: #24a893;
$color-4: #1f7d71;
$color-5: #6c5740;

TAILWIND

colors: {
  'brand-1': '#f69c4c',
  'brand-2': '#95b16f',
  'brand-3': '#24a893',
  'brand-4': '#1f7d71',
  'brand-5': '#6c5740',
}

RGB Array

[246, 156, 76], [149, 177, 111], [36, 168, 147], [31, 125, 113], [108, 87, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F69C4C, #95B16F, #24A893, #1F7D71, #6C5740 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: #f69c4c; --color-2: #95b16f; --color-3: #24a893; --color-4: #1f7d71; --color-5: #6c5740. 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