#67B697 + #A2DFA4 + #CCF9B4 + #D8B89F + #BA9B6D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#67B697

Mineral Blue · CadetBlue · Olive Green

HEX

#67B697

RGB

rgb(103, 182, 151)

HSL

hsl(156, 35%, 56%)

HSB

hsb(156, 43%, 71%)

CMYK

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

Oklch

oklch(71.7% 0.091 166.6)

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

#A2DFA4

Celadon · LightGreen · Apple Green

HEX

#A2DFA4

RGB

rgb(162, 223, 164)

HSL

hsl(122, 49%, 75%)

HSB

hsb(122, 27%, 87%)

CMYK

cmyk(27%, 0%, 26%, 13%)

Oklch

oklch(84.7% 0.102 145.4)

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

#CCF9B4

Emerald · Wheat · Mint Green

HEX

#CCF9B4

RGB

rgb(204, 249, 180)

HSL

hsl(99, 85%, 84%)

HSB

hsb(99, 28%, 98%)

CMYK

cmyk(18%, 0%, 28%, 2%)

Oklch

oklch(93.4% 0.102 135.0)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#D8B89F

Apricot · Tan · Warm Sun

HEX

#D8B89F

RGB

rgb(216, 184, 159)

HSL

hsl(26, 42%, 74%)

HSB

hsb(26, 26%, 85%)

CMYK

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

Oklch

oklch(80.4% 0.050 60.0)

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

#BA9B6D

Ginger · Tan · Warm Sun

HEX

#BA9B6D

RGB

rgb(186, 155, 109)

HSL

hsl(36, 36%, 58%)

HSB

hsb(36, 41%, 73%)

CMYK

cmyk(0%, 17%, 41%, 27%)

Oklch

oklch(70.7% 0.072 77.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67B697

B66887

Analogous

68B66F

67B697

68AEB6

Triadic

67B697

9768B6

B69768

Split-Comp.

67B697

B668AE

B66F68

Tetradic

67B697

6F68B6

B66887

AEB668

Contrast Matrix WCAG 2.1 Contrast

67B697	A2DFA4	CCF9B4	D8B89F	BA9B6D
—	1.6 Fail	2.0 Fail	1.3 Fail	1.1 Fail
1.6 Fail	—	1.3 Fail	1.2 Fail	1.7 Fail
2.0 Fail	1.3 Fail	—	1.6 Fail	2.2 Fail
1.3 Fail	1.2 Fail	1.6 Fail	—	1.4 Fail
1.1 Fail	1.7 Fail	2.2 Fail	1.4 Fail	—

White BG

2.4Fail

1.5Fail

1.2Fail

1.9Fail

2.6Fail

Black BG

8.7AAA

13.6AAA

17.8AAA

11.3AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898A9F

BCBDB2

DFE0C5

CACAA5

ADAC78

Deuteranopia

857FA0

B9B4B6

DDDAC9

CCCEA7

AEB17B

Tritanopia

6BA4A6

A5BEC0

CED2D5

D6AAAB

B88183

Achromatopsia

9B9B9B

C6C6C6

E4E4E4

BFBFBF

9F9F9F

Shades & Tints Shades & Tints

#67B697

Dark

Light

#A2DFA4

Dark

Light

#CCF9B4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67b697;
  --color-2: #a2dfa4;
  --color-3: #ccf9b4;
  --color-4: #d8b89f;
  --color-5: #ba9b6d;
}

SCSS

$color-1: #67b697;
$color-2: #a2dfa4;
$color-3: #ccf9b4;
$color-4: #d8b89f;
$color-5: #ba9b6d;

TAILWIND

colors: {
  'brand-1': '#67b697',
  'brand-2': '#a2dfa4',
  'brand-3': '#ccf9b4',
  'brand-4': '#d8b89f',
  'brand-5': '#ba9b6d',
}

RGB Array

[103, 182, 151], [162, 223, 164], [204, 249, 180], [216, 184, 159], [186, 155, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #67B697, #A2DFA4, #CCF9B4, #D8B89F, #BA9B6D is ideal for: health products, baby brands, fresh-style blogs. 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: #67b697; --color-2: #a2dfa4; --color-3: #ccf9b4; --color-4: #d8b89f; --color-5: #ba9b6d. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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