#538383 + #599289 + #92BA86 + #B8C983 + #F8F691 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#538383

Slate Blue · SlateGray · Mint Ice

HEX

#538383

RGB

rgb(83, 131, 131)

HSL

hsl(180, 22%, 42%)

HSB

hsb(180, 37%, 51%)

CMYK

cmyk(37%, 0%, 0%, 49%)

Oklch

oklch(57.6% 0.052 195.8)

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

#599289

Mineral Blue · CadetBlue · Mint Ice

HEX

#599289

RGB

rgb(89, 146, 137)

HSL

hsl(171, 24%, 46%)

HSB

hsb(171, 39%, 57%)

CMYK

cmyk(39%, 0%, 6%, 43%)

Oklch

oklch(61.8% 0.062 183.1)

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

#92BA86

Celadon · DarkSeaGreen · Apple Green

HEX

#92BA86

RGB

rgb(146, 186, 134)

HSL

hsl(106, 27%, 63%)

HSB

hsb(106, 28%, 73%)

CMYK

cmyk(22%, 0%, 28%, 27%)

Oklch

oklch(74.6% 0.085 138.6)

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

#B8C983

Willow Green · Tan · Apple Green

HEX

#B8C983

RGB

rgb(184, 201, 131)

HSL

hsl(75, 39%, 65%)

HSB

hsb(75, 35%, 79%)

CMYK

cmyk(8%, 0%, 35%, 21%)

Oklch

oklch(80.6% 0.094 119.7)

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

#F8F691

Fresh Green · Khaki · Lemon Cream

HEX

#F8F691

RGB

rgb(248, 246, 145)

HSL

hsl(59, 88%, 77%)

HSB

hsb(59, 42%, 97%)

CMYK

cmyk(0%, 1%, 42%, 3%)

Oklch

oklch(95.3% 0.123 107.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

538383

835454

Analogous

54836B

538383

546B83

Triadic

538383

835483

838354

Split-Comp.

538383

83546B

836B54

Tetradic

538383

6B5483

835454

6B8354

Contrast Matrix WCAG 2.1 Contrast

538383	599289	92BA86	B8C983	F8F691
—	1.2 Fail	1.9 Fail	2.4 Fail	3.8 AA Large
1.2 Fail	—	1.6 Fail	2.0 Fail	3.2 AA Large
1.9 Fail	1.6 Fail	—	1.2 Fail	1.9 Fail
2.4 Fail	2.0 Fail	1.2 Fail	—	1.6 Fail
3.8 AA Large	3.2 AA Large	1.9 Fail	1.6 Fail	—

White BG

4.2AA Large

3.6AA Large

2.2Fail

1.8Fail

1.1Fail

Black BG

4.9AA

5.9AA

9.6AAA

11.7AAA

18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

686883

72728B

A3A493

BFC094

F7F7A9

Deuteranopia

656183

6E6A8C

A19E96

BEBD98

F7F7AF

Tritanopia

558383

5C8D8D

949D9F

B9A1A4

F8BDC1

Achromatopsia

757575

808080

A8A8A8

BCBCBC

EBEBEB

Shades & Tints Shades & Tints

#538383

Dark

Light

#599289

Dark

Light

#92BA86

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #538383;
  --color-2: #599289;
  --color-3: #92ba86;
  --color-4: #b8c983;
  --color-5: #f8f691;
}

SCSS

$color-1: #538383;
$color-2: #599289;
$color-3: #92ba86;
$color-4: #b8c983;
$color-5: #f8f691;

TAILWIND

colors: {
  'brand-1': '#538383',
  'brand-2': '#599289',
  'brand-3': '#92ba86',
  'brand-4': '#b8c983',
  'brand-5': '#f8f691',
}

RGB Array

[83, 131, 131], [89, 146, 137], [146, 186, 134], [184, 201, 131], [248, 246, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #538383, #599289, #92BA86, #B8C983, #F8F691 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: #538383; --color-2: #599289; --color-3: #92ba86; --color-4: #b8c983; --color-5: #f8f691. 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