#23DB76 + #23DBB3 + #B6DBB4 + #DBDBDB + #FFDF0F · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#23DB76

Pine Green · MediumSeaGreen · Olive Green

HEX

#23DB76

RGB

rgb(35, 219, 118)

HSL

hsl(147, 72%, 50%)

HSB

hsb(147, 84%, 86%)

CMYK

cmyk(84%, 0%, 46%, 14%)

Oklch

oklch(78.4% 0.198 152.2)

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

#23DBB3

Mineral Blue · Turquoise · Mint Ice

HEX

#23DBB3

RGB

rgb(35, 219, 179)

HSL

hsl(167, 72%, 50%)

HSB

hsb(167, 84%, 86%)

CMYK

cmyk(84%, 0%, 18%, 14%)

Oklch

oklch(79.7% 0.148 172.6)

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

#B6DBB4

Celadon · Silver · Apple Green

HEX

#B6DBB4

RGB

rgb(182, 219, 180)

HSL

hsl(117, 35%, 78%)

HSB

hsb(117, 18%, 86%)

CMYK

cmyk(17%, 0%, 18%, 14%)

Oklch

oklch(85.4% 0.066 143.6)

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

#DBDBDB

Plain White · LightGray · Cloud White

HEX

#DBDBDB

RGB

rgb(219, 219, 219)

HSL

hsl(0, 0%, 86%)

HSB

hsb(0, 0%, 86%)

CMYK

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

Oklch

oklch(89.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#FFDF0F

Autumn Sage · Gold · Sunflower

HEX

#FFDF0F

RGB

rgb(255, 223, 15)

HSL

hsl(52, 100%, 53%)

HSB

hsb(52, 94%, 100%)

CMYK

cmyk(0%, 13%, 94%, 0%)

Oklch

oklch(90.3% 0.185 98.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

23DB76

DB2489

Analogous

2DDB24

23DB76

24DBD2

Triadic

23DB76

7624DB

DB7624

Split-Comp.

23DB76

D224DB

DB242D

Tetradic

23DB76

242DDB

DB2489

DBD224

Contrast Matrix WCAG 2.1 Contrast

23DB76	23DBB3	B6DBB4	DBDBDB	FFDF0F
—	1.0 Fail	1.2 Fail	1.3 Fail	1.4 Fail
1.0 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
1.2 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
1.4 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.8Fail

1.5Fail

1.4Fail

1.3Fail

Black BG

11.5AAA

11.9AAA

13.8AAA

15.2AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

73748E

7374BD

C6C6BD

DBDBDB

F1F141

Deuteranopia

685A94

685ABF

C4C1C0

DBDBDB

F3F54D

Tritanopia

2CA2A6

2CC4C6

B8C5C7

DBDBDB

FD6972

Achromatopsia

989898

9F9F9F

CBCBCB

DBDBDB

D1D1D1

Shades & Tints Shades & Tints

#23DB76

Dark

Light

#23DBB3

Dark

Light

#B6DBB4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #23db76;
  --color-2: #23dbb3;
  --color-3: #b6dbb4;
  --color-4: #dbdbdb;
  --color-5: #ffdf0f;
}

SCSS

$color-1: #23db76;
$color-2: #23dbb3;
$color-3: #b6dbb4;
$color-4: #dbdbdb;
$color-5: #ffdf0f;

TAILWIND

colors: {
  'brand-1': '#23db76',
  'brand-2': '#23dbb3',
  'brand-3': '#b6dbb4',
  'brand-4': '#dbdbdb',
  'brand-5': '#ffdf0f',
}

RGB Array

[35, 219, 118], [35, 219, 179], [182, 219, 180], [219, 219, 219], [255, 223, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #23DB76, #23DBB3, #B6DBB4, #DBDBDB, #FFDF0F 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: #23db76; --color-2: #23dbb3; --color-3: #b6dbb4; --color-4: #dbdbdb; --color-5: #ffdf0f. 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 summer-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