#2AA893 + #49B194 + #9BC897 + #CAD599 + #F9E39A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2AA893

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#2AA893

RGB

rgb(42, 168, 147)

HSL

hsl(170, 60%, 41%)

HSB

hsb(170, 75%, 66%)

CMYK

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

Oklch

oklch(66.0% 0.111 178.7)

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

#49B194

Mineral Blue · CadetBlue · Mint Ice

HEX

#49B194

RGB

rgb(73, 177, 148)

HSL

hsl(163, 42%, 49%)

HSB

hsb(163, 59%, 69%)

CMYK

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

Oklch

oklch(69.1% 0.106 171.8)

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

#9BC897

Celadon · DarkSeaGreen · Apple Green

HEX

#9BC897

RGB

rgb(155, 200, 151)

HSL

hsl(115, 31%, 69%)

HSB

hsb(115, 25%, 78%)

CMYK

cmyk(23%, 0%, 25%, 22%)

Oklch

oklch(78.8% 0.083 142.7)

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

#CAD599

Willow Green · Tan · Apple Green

HEX

#CAD599

RGB

rgb(202, 213, 153)

HSL

hsl(71, 42%, 72%)

HSB

hsb(71, 28%, 84%)

CMYK

cmyk(5%, 0%, 28%, 16%)

Oklch

oklch(85.0% 0.080 116.6)

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

#F9E39A

Goose Yellow · Khaki · Lemon Cream

HEX

#F9E39A

RGB

rgb(249, 227, 154)

HSL

hsl(46, 89%, 79%)

HSB

hsb(46, 38%, 98%)

CMYK

cmyk(0%, 9%, 38%, 2%)

Oklch

oklch(91.7% 0.095 93.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2AA893

A72A3F

Analogous

2AA754

2AA893

2A7DA7

Triadic

2AA893

922AA7

A7922A

Split-Comp.

2AA893

A72A7D

A7542A

Tetradic

2AA893

542AA7

A72A3F

7DA72A

Contrast Matrix WCAG 2.1 Contrast

2AA893	49B194	9BC897	CAD599	F9E39A
—	1.1 Fail	1.6 Fail	1.9 Fail	2.3 Fail
1.1 Fail	—	1.4 Fail	1.7 Fail	2.1 Fail
1.6 Fail	1.4 Fail	—	1.2 Fail	1.5 Fail
1.9 Fail	1.7 Fail	1.2 Fail	—	1.2 Fail
2.3 Fail	2.1 Fail	1.5 Fail	1.2 Fail	—

White BG

2.9Fail

2.6Fail

1.9Fail

1.6Fail

1.3Fail

Black BG

7.1AAA

8.0AAA

11.1AAA

13.5AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

616298

76779B

AEAFA3

CFCFA8

EFEFAC

Deuteranopia

595099

70689D

ACA9A6

CECDAB

F1F2B0

Tritanopia

309C9D

4EA1A2

9DACAE

CBB3B6

F8BABD

Achromatopsia

808080

8F8F8F

B5B5B5

CBCBCB

E1E1E1

Shades & Tints Shades & Tints

#2AA893

Dark

Light

#49B194

Dark

Light

#9BC897

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2aa893;
  --color-2: #49b194;
  --color-3: #9bc897;
  --color-4: #cad599;
  --color-5: #f9e39a;
}

SCSS

$color-1: #2aa893;
$color-2: #49b194;
$color-3: #9bc897;
$color-4: #cad599;
$color-5: #f9e39a;

TAILWIND

colors: {
  'brand-1': '#2aa893',
  'brand-2': '#49b194',
  'brand-3': '#9bc897',
  'brand-4': '#cad599',
  'brand-5': '#f9e39a',
}

RGB Array

[42, 168, 147], [73, 177, 148], [155, 200, 151], [202, 213, 153], [249, 227, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2AA893, #49B194, #9BC897, #CAD599, #F9E39A 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: #2aa893; --color-2: #49b194; --color-3: #9bc897; --color-4: #cad599; --color-5: #f9e39a. 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