What are the hex codes in the Kelly Green & Forest Vibe palette?

The Kelly Green & Forest Vibe color palette consists of Evergreen #004B23, Forest #007200, Kelly Green #38B000, Periwinkle #B4D8FF.

How should I use the Kelly Green & Forest Vibe palette on a website?

Use Periwinkle #B4D8FF as the background, Evergreen #004B23 for text, Forest #007200 for buttons and links, and Kelly Green #38B000 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Periwinkle at 7:1.

Which colors in Kelly Green & Forest Vibe have enough contrast for text?

The highest-contrast pair is #004B23 on #B4D8FF with a ratio of 7:1, which passes WCAG AA for normal text.

#004B23Evergreen

#007200Forest

#38B000Kelly Green

#B4D8FFPeriwinkle

Kelly Green & Forest Vibe color palette

Vibrant Green Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Evergreen	`#004B23`	`rgb(0, 75, 35)`	`hsl(148, 100%, 15%)`	`oklch(36.2% 0.095 152)`
Forest	`#007200`	`rgb(0, 114, 0)`	`hsl(120, 100%, 22%)`	`oklch(47.8% 0.163 142)`
Kelly Green	`#38B000`	`rgb(56, 176, 0)`	`hsl(101, 100%, 35%)`	`oklch(66.4% 0.213 140)`
Periwinkle	`#B4D8FF`	`rgb(180, 216, 255)`	`hsl(211, 100%, 85%)`	`oklch(86.9% 0.066 251)`

Why it works and how to use it

Kelly Green & Forest Vibe is a vivid dark, split color palette tagged vibrant, green, blue. The hues span about 110°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them.

The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (85% down to 15% lightness). A natural fit for dark-mode interfaces and gaming.

Background: Periwinkle (#B4D8FF) is the lightest color, so it belongs on large surfaces.
Text: Evergreen (#004B23) on #B4D8FF gives 7:1, passing WCAG AAA.
Primary: Forest (#007200) is the most saturated mid-tone; use it for buttons and links (4.17:1 against the background, fine for UI elements).
Accent: Kelly Green (#38B000) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Evergreen on Periwinkle at 7:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Kelly Green & Forest Vibe

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#004B23

#007200

#38B000

#B4D8FF

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#004B23` on `#B4D8FF`	Aa	7:1	AAA
`#007200` on `#B4D8FF`	Aa	4.17:1	AA large only
`#004B23` on `#38B000`	Aa	3.63:1	AA large only
`#007200` on `#38B000`	Aa	2.17:1	Fail
`#38B000` on `#B4D8FF`	Aa	1.93:1	Fail
`#004B23` on `#007200`	Aa	1.68:1	Fail

:root {
  --evergreen: #004B23;
  --forest: #007200;
  --kelly-green: #38B000;
  --periwinkle: #B4D8FF;
}

$evergreen: #004B23;
$forest: #007200;
$kelly-green: #38B000;
$periwinkle: #B4D8FF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'evergreen': '#004B23',
        'forest': '#007200',
        'kelly-green': '#38B000',
        'periwinkle': '#B4D8FF',
      },
    },
  },
};

{
  "name": "Kelly Green & Forest Vibe",
  "colors": [
    "#004B23",
    "#007200",
    "#38B000",
    "#B4D8FF"
  ]
}

background: linear-gradient(135deg, #004B23, #007200, #38B000, #B4D8FF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-12-17 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood