#0CFB8B + #35C4A5 + #7D7DDB + #7D48AB + #583775 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#0CFB8B

Mineral Blue · MediumSpringGreen · Olive Green

HEX

#0CFB8B

RGB

rgb(12, 251, 139)

HSL

hsl(152, 97%, 52%)

HSB

hsb(152, 95%, 98%)

CMYK

cmyk(95%, 0%, 45%, 2%)

Oklch

oklch(86.7% 0.220 153.4)

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

#35C4A5

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#35C4A5

RGB

rgb(53, 196, 165)

HSL

hsl(167, 57%, 49%)

HSB

hsb(167, 73%, 77%)

CMYK

cmyk(73%, 0%, 16%, 23%)

Oklch

oklch(73.9% 0.127 174.5)

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

#7D7DDB

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#7D7DDB

RGB

rgb(125, 125, 219)

HSL

hsl(240, 57%, 67%)

HSB

hsb(240, 43%, 86%)

CMYK

cmyk(43%, 43%, 0%, 14%)

Oklch

oklch(63.2% 0.139 281.7)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#7D48AB

Dark Plum · SlateBlue · Violet

HEX

#7D48AB

RGB

rgb(125, 72, 171)

HSL

hsl(272, 41%, 48%)

HSB

hsb(272, 58%, 67%)

CMYK

cmyk(27%, 58%, 0%, 33%)

Oklch

oklch(51.0% 0.156 306.4)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#583775

Dark Plum · DarkSlateBlue · Eggplant

HEX

#583775

RGB

rgb(88, 55, 117)

HSL

hsl(272, 36%, 34%)

HSB

hsb(272, 53%, 46%)

CMYK

cmyk(25%, 53%, 0%, 54%)

Oklch

oklch(40.5% 0.106 306.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0CFB8B

FB0E7D

Analogous

0EFB16

0CFB8B

0EF3FB

Triadic

0CFB8B

8D0EFB

FB8D0E

Split-Comp.

0CFB8B

FB0EF3

FB160E

Tetradic

0CFB8B

160EFB

FB0E7D

F3FB0E

Contrast Matrix WCAG 2.1 Contrast

0CFB8B	35C4A5	7D7DDB	7D48AB	583775
—	1.6 Fail	2.6 Fail	4.5 AA Large	6.8 AA
1.6 Fail	—	1.6 Fail	2.8 Fail	4.3 AA Large
2.6 Fail	1.6 Fail	—	1.7 Fail	2.6 Fail
4.5 AA Large	2.8 Fail	1.7 Fail	—	1.5 Fail
6.8 AA	4.3 AA Large	2.6 Fail	1.5 Fail	—

White BG

1.4Fail

2.2Fail

3.6AA Large

6.2AA

9.5AAA

Black BG

15.2AAA

9.6AAA

5.8AA

3.4AA Large

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7376A6

7374AD

7D7DC4

666693

4A4966

Deuteranopia

6654AD

6B60AE

7D7DBF

696D8D

4C4E62

Tritanopia

18BBC0

3CB2B4

7DB2AE

7A807C

565A58

Achromatopsia

A7A7A7

969696

888888

636363

484848

Shades & Tints Shades & Tints

#0CFB8B

Dark

Light

#35C4A5

Dark

Light

#7D7DDB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0cfb8b;
  --color-2: #35c4a5;
  --color-3: #7d7ddb;
  --color-4: #7d48ab;
  --color-5: #583775;
}

SCSS

$color-1: #0cfb8b;
$color-2: #35c4a5;
$color-3: #7d7ddb;
$color-4: #7d48ab;
$color-5: #583775;

TAILWIND

colors: {
  'brand-1': '#0cfb8b',
  'brand-2': '#35c4a5',
  'brand-3': '#7d7ddb',
  'brand-4': '#7d48ab',
  'brand-5': '#583775',
}

RGB Array

[12, 251, 139], [53, 196, 165], [125, 125, 219], [125, 72, 171], [88, 55, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0CFB8B, #35C4A5, #7D7DDB, #7D48AB, #583775 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: #0cfb8b; --color-2: #35c4a5; --color-3: #7d7ddb; --color-4: #7d48ab; --color-5: #583775. 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