#4AC2A8 + #68CCB3 + #92D1AA + #D1CA88 + #B3A188 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4AC2A8

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#4AC2A8

RGB

rgb(74, 194, 168)

HSL

hsl(167, 50%, 53%)

HSB

hsb(167, 62%, 76%)

CMYK

cmyk(62%, 0%, 13%, 24%)

Oklch

oklch(74.0% 0.114 176.0)

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

#68CCB3

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#68CCB3

RGB

rgb(104, 204, 179)

HSL

hsl(165, 50%, 60%)

HSB

hsb(165, 49%, 80%)

CMYK

cmyk(49%, 0%, 12%, 20%)

Oklch

oklch(77.8% 0.102 175.1)

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

#92D1AA

Celadon · DarkSeaGreen · Apple Green

HEX

#92D1AA

RGB

rgb(146, 209, 170)

HSL

hsl(143, 41%, 70%)

HSB

hsb(143, 30%, 82%)

CMYK

cmyk(30%, 0%, 19%, 18%)

Oklch

oklch(80.7% 0.085 156.7)

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

#D1CA88

Fresh Green · BurlyWood · Sunflower

HEX

#D1CA88

RGB

rgb(209, 202, 136)

HSL

hsl(54, 44%, 68%)

HSB

hsb(54, 35%, 82%)

CMYK

cmyk(0%, 3%, 35%, 18%)

Oklch

oklch(82.9% 0.086 102.9)

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

#B3A188

Ginger · DarkGray · Warm Sun

HEX

#B3A188

RGB

rgb(179, 161, 136)

HSL

hsl(35, 22%, 62%)

HSB

hsb(35, 24%, 70%)

CMYK

cmyk(0%, 10%, 24%, 30%)

Oklch

oklch(71.8% 0.041 76.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4AC2A8

C34B65

Analogous

4BC36D

4AC2A8

4BA1C3

Triadic

4AC2A8

A94BC3

C3A94B

Split-Comp.

4AC2A8

C34BA1

C36D4B

Tetradic

4AC2A8

6D4BC3

C34B65

A1C34B

Contrast Matrix WCAG 2.1 Contrast

4AC2A8	68CCB3	92D1AA	D1CA88	B3A188
—	1.1 Fail	1.2 Fail	1.3 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.0 Fail	1.4 Fail
1.3 Fail	1.2 Fail	1.0 Fail	—	1.5 Fail
1.1 Fail	1.3 Fail	1.4 Fail	1.5 Fail	—

White BG

2.2Fail

1.9Fail

1.8Fail

1.7Fail

2.5Fail

Black BG

9.6AAA

10.9AAA

11.9AAA

12.5AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7FAE

9394B9

ADAEB3

CECE98

ABAB8E

Deuteranopia

776EB0

8E86BB

AAA5B6

CECF9C

ACAE90

Tritanopia

50B3B4

6DBEBF

95BBBD

D1A5A7

B29394

Achromatopsia

9B9B9B

ABABAB

BABABA

C5C5C5

A4A4A4

Shades & Tints Shades & Tints

#4AC2A8

Dark

Light

#68CCB3

Dark

Light

#92D1AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4ac2a8;
  --color-2: #68ccb3;
  --color-3: #92d1aa;
  --color-4: #d1ca88;
  --color-5: #b3a188;
}

SCSS

$color-1: #4ac2a8;
$color-2: #68ccb3;
$color-3: #92d1aa;
$color-4: #d1ca88;
$color-5: #b3a188;

TAILWIND

colors: {
  'brand-1': '#4ac2a8',
  'brand-2': '#68ccb3',
  'brand-3': '#92d1aa',
  'brand-4': '#d1ca88',
  'brand-5': '#b3a188',
}

RGB Array

[74, 194, 168], [104, 204, 179], [146, 209, 170], [209, 202, 136], [179, 161, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4AC2A8, #68CCB3, #92D1AA, #D1CA88, #B3A188 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: #4ac2a8; --color-2: #68ccb3; --color-3: #92d1aa; --color-4: #d1ca88; --color-5: #b3a188. 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