← Back to Editor

#DDA625 · #94BD7B · #69CCA2 · #689983 · #666666

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DDA625

Ginger · GoldenRod · Sunflower

HEX
#DDA625
RGB
rgb(221, 166, 37)
HSL
hsl(42, 73%, 51%)
HSB
hsb(42, 83%, 87%)
CMYK
cmyk(0%, 25%, 83%, 13%)
Oklch
oklch(75.7% 0.146 82.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#94BD7B

Celadon · DarkSeaGreen · Apple Green

HEX
#94BD7B
RGB
rgb(148, 189, 123)
HSL
hsl(97, 33%, 61%)
HSB
hsb(97, 35%, 74%)
CMYK
cmyk(22%, 0%, 35%, 26%)
Oklch
oklch(75.2% 0.101 134.2)

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

#69CCA2

Jade · MediumAquaMarine · Apple Green

HEX
#69CCA2
RGB
rgb(105, 204, 162)
HSL
hsl(155, 49%, 61%)
HSB
hsb(155, 49%, 80%)
CMYK
cmyk(49%, 0%, 21%, 20%)
Oklch
oklch(77.3% 0.113 164.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#689983

Mineral Blue · SlateGray · Olive Green

HEX
#689983
RGB
rgb(104, 153, 131)
HSL
hsl(153, 19%, 50%)
HSB
hsb(153, 32%, 60%)
CMYK
cmyk(32%, 0%, 14%, 40%)
Oklch
oklch(64.1% 0.062 164.8)

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

#666666

Ink Gray · DimGray · Charcoal

HEX
#666666
RGB
rgb(102, 102, 102)
HSL
hsl(0, 0%, 40%)
HSB
hsb(0, 0%, 40%)
CMYK
cmyk(0%, 0%, 0%, 60%)
Oklch
oklch(51.0% 0.000 89.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDA625
275EDD

Analogous

DD4B27
DDA625
B9DD27

Triadic

DDA625
27DDA7
A727DD

Split-Comp.

DDA625
27B9DD
4B27DD

Tetradic

DDA625
27DD4B
275EDD
DD27B9

Contrast Matrix WCAG 2.1 Contrast

DDA625
94BD7B
69CCA2
689983
666666
—
1.0
Fail
1.1
Fail
1.5
Fail
2.6
Fail
1.0
Fail
—
1.1
Fail
1.5
Fail
2.7
Fail
1.1
Fail
1.1
Fail
—
1.7
Fail
2.9
Fail
1.5
Fail
1.5
Fail
1.7
Fail
—
1.8
Fail
2.6
Fail
2.7
Fail
2.9
Fail
1.8
Fail
—
White BG
2.2Fail
2.1Fail
2.0Fail
3.2AA Large
5.7AA
Black BG
9.6AAA
9.8AAA
10.8AAA
6.5AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C544
A6A68B
9495AC
7D7E88
666666

Deuteranopia

C8CD4C
A3A08F
8E87AF
7A778A
666666

Tritanopia

DA5D62
96989A
6EB4B6
6A8D8D
666666

Achromatopsia

A8A8A8
A9A9A9
AAAAAA
888888
666666

Shades & Tints Shades & Tints

#DDA625

Dark
Light

#94BD7B

Dark
Light

#69CCA2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dda625;
  --color-2: #94bd7b;
  --color-3: #69cca2;
  --color-4: #689983;
  --color-5: #666666;
}

SCSS

$color-1: #dda625;
$color-2: #94bd7b;
$color-3: #69cca2;
$color-4: #689983;
$color-5: #666666;

TAILWIND

colors: {
  'brand-1': '#dda625',
  'brand-2': '#94bd7b',
  'brand-3': '#69cca2',
  'brand-4': '#689983',
  'brand-5': '#666666',
}

RGB Array

[221, 166, 37], [148, 189, 123], [105, 204, 162], [104, 153, 131], [102, 102, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDA625, #94BD7B, #69CCA2, #689983, #666666 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: #dda625; --color-2: #94bd7b; --color-3: #69cca2; --color-4: #689983; --color-5: #666666. 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