#639A8A + #7DB391 + #98CD98 + #B2E69F + #CCFFA6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#639A8A

Mineral Blue · CadetBlue · Mint Ice

HEX

#639A8A

RGB

rgb(99, 154, 138)

HSL

hsl(163, 22%, 50%)

HSB

hsb(163, 36%, 60%)

CMYK

cmyk(36%, 0%, 10%, 40%)

Oklch

oklch(64.3% 0.063 173.9)

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

#7DB391

Celadon · DarkSeaGreen · Olive Green

HEX

#7DB391

RGB

rgb(125, 179, 145)

HSL

hsl(142, 26%, 60%)

HSB

hsb(142, 30%, 70%)

CMYK

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

Oklch

oklch(71.9% 0.075 156.3)

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

#98CD98

Celadon · DarkSeaGreen · Apple Green

HEX

#98CD98

RGB

rgb(152, 205, 152)

HSL

hsl(120, 35%, 70%)

HSB

hsb(120, 26%, 80%)

CMYK

cmyk(26%, 0%, 26%, 20%)

Oklch

oklch(79.7% 0.092 144.6)

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

#B2E69F

Emerald · LightGreen · Apple Green

HEX

#B2E69F

RGB

rgb(178, 230, 159)

HSL

hsl(104, 59%, 76%)

HSB

hsb(104, 31%, 90%)

CMYK

cmyk(23%, 0%, 31%, 10%)

Oklch

oklch(87.1% 0.109 137.5)

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

#CCFFA6

Emerald · Khaki · Mint Green

HEX

#CCFFA6

RGB

rgb(204, 255, 166)

HSL

hsl(94, 100%, 83%)

HSB

hsb(94, 35%, 100%)

CMYK

cmyk(20%, 0%, 35%, 0%)

Oklch

oklch(94.4% 0.126 132.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

639A8A

9C6373

Analogous

639C70

639A8A

638F9C

Triadic

639A8A

8C639C

9C8C63

Split-Comp.

639A8A

9C638F

9C7063

Tetradic

639A8A

70639C

9C6373

8F9C63

Contrast Matrix WCAG 2.1 Contrast

639A8A	7DB391	98CD98	B2E69F	CCFFA6
—	1.3 Fail	1.8 Fail	2.3 Fail	2.8 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
1.8 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
2.3 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
2.8 Fail	2.1 Fail	1.6 Fail	1.3 Fail	—

White BG

3.2AA Large

2.4Fail

1.8Fail

1.4Fail

1.1Fail

Black BG

6.5AA

8.7AAA

11.5AAA

14.7AAA

18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B8E

949599

AFAFA5

C9C9B0

E2E3BC

Deuteranopia

78748F

918D9B

ACA8A8

C6C2B4

DFDBC1

Tritanopia

669192

80A0A1

9BAFB1

B5BEC1

CFCDD0

Achromatopsia

888888

9F9F9F

B7B7B7

CECECE

E6E6E6

Shades & Tints Shades & Tints

#639A8A

Dark

Light

#7DB391

Dark

Light

#98CD98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #639a8a;
  --color-2: #7db391;
  --color-3: #98cd98;
  --color-4: #b2e69f;
  --color-5: #ccffa6;
}

SCSS

$color-1: #639a8a;
$color-2: #7db391;
$color-3: #98cd98;
$color-4: #b2e69f;
$color-5: #ccffa6;

TAILWIND

colors: {
  'brand-1': '#639a8a',
  'brand-2': '#7db391',
  'brand-3': '#98cd98',
  'brand-4': '#b2e69f',
  'brand-5': '#ccffa6',
}

RGB Array

[99, 154, 138], [125, 179, 145], [152, 205, 152], [178, 230, 159], [204, 255, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #639A8A, #7DB391, #98CD98, #B2E69F, #CCFFA6 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: #639a8a; --color-2: #7db391; --color-3: #98cd98; --color-4: #b2e69f; --color-5: #ccffa6. 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