Let’s take a closer look at the color #228B22, which is commonly known as Forest Green. This color is loved for its rich, earthy tone and is widely used in web design, graphics, and fashion. In this guide, we’ll explain everything about #228B22 in a simple, easy-to-understand way, using a friendly tone. Whether you’re a beginner or just curious about color codes, this article will help you understand the basics of #228B22 and how to use it effectively.
What is #228B22?
The color code #228B22 is a hexadecimal color value. It represents a specific shade of green. The name “Forest Green” fits perfectly because this color looks just like deep green trees you see in forests. It’s a strong, medium-dark green tone with a natural and calming appearance.
RGB Value of #228B22
The RGB color model stands for Red, Green, Blue. These three colors mix in different ways to create every color you see on digital screens.
For #228B22:
- Red = 34
- Green = 139
- Blue = 34
This means green is the most dominant part of this color, which makes sense because it is a shade of green.
In percentages:
- Red: 16.43%
- Green: 67.15%
- Blue: 16.43%
So you can see how green takes the lead here
HSL and HSV of #228B22
HSL stands for Hue, Saturation, Lightness, and HSV stands for Hue, Saturation, Value. These are other ways to represent colors digitally.
For HSL:
- Hue: 120° (this means green)
- Saturation: 61% (shows how pure or strong the color is)
- Lightness: 34% (how dark or light it is)
For HSV:
- Hue: 120°
- Saturation: 76%
- Value: 55%
These numbers confirm that #228B22 is a strong green color that isn’t too light or too dark.
CMYK Breakdown
CMYK is the color model used in printing. It stands for Cyan, Magenta, Yellow, and Black.
The CMYK values for #228B22 are:
- Cyan: 75.54%
- Magenta: 0%
- Yellow: 75.54%
- Black: 45.49%
These values are useful if you are printing something and want this exact color.
Color Spaces and Formats
Every color can be represented in different formats depending on what you are doing. Here’s how #228B22 looks across different formats:
- Hex: #228B22 (this is used in web design and CSS)
- RGB: (34, 139, 34)
- Decimal: Red: 34, Green: 139, Blue: 34
- Binary: Red: 100010, Green: 10001011, Blue: 100010
- Octal: Red: 42, Green: 213, Blue: 42
Shades and Tints of #228B22
Shades are darker versions of the color, and tints are lighter versions. Here are a few of each:
Shades:
- #1f7d1f (a bit darker)
- #0a2a0a (very dark green, close to black)
Tints:
- #4ea24e (a bit lighter)
- #d3e8d3 (a very soft green)
These are helpful when you want to build a color palette with different tones of green.
CSS Code Examples
If you are building a website or a project and want to use this color, here’s how you can use it in CSS:
Background Color:
cssCopyEdit.mybgColor {
background-color: #228b22;
}
Font Color:
cssCopyEdit.myforeColor {
color: #228b22;
}
Border Color:
cssCopyEdit.myborderColor {
border: 3px solid #228b22;
}
You can also use it directly in HTML like this:
Text Color:
htmlCopyEdit<p style="color:#228b22">This is green text</p>
Background Color:
htmlCopyEdit<div style="background-color:#228b22">This div has a green background</div>
Border Example:
htmlCopyEdit<div style="border:3px solid #228b22">This div has a green border</div>
Text Shadow and Box Shadow with #228B22
You can also use #228b22 for shadows, which adds a nice visual touch.
Text Shadow (RGB):
htmlCopyEdit<p style="text-shadow: 4px 4px 2px rgba(34, 139, 34, 0.8);">Shadow Text</p>
Text Shadow (Hex):
htmlCopyEdit<p style="text-shadow: 4px 4px 2px #228b22;">Shadow Text</p>
Box Shadow for Div:
htmlCopyEdit<div style="box-shadow: 1px 1px 3px #228b22;">Box with shadow</div>
These effects can make text and boxes stand out in your design.
Where Is #228B22 Used?
- Web design: Often used for buttons, backgrounds, or highlights.
- Nature-themed graphics: Because it looks like grass or tree leaves.
- Fashion: Found in clothes and accessories for a natural, outdoorsy vibe.
- Logos: Companies that promote eco-friendly or nature products might use this green.
- UI design: Common in dashboards or apps where color coding is used (green usually means success or go).
Related Colors to #228B22
If you like this color, you might also like:
- #114611 – A darker green
- #64ae64 – A more pastel green
- #91c591 – A soft mint-like green
- #e9f3e9 – A very pale green, almost white
- #4ea24e – A brighter green
These colors go well with #228B22 and can be used together for a beautiful color scheme.
Final Thoughts
The color #228B22 (Forest Green) is a rich and strong shade of green that’s perfect for designs related to nature, environment, or any calm and trustworthy theme. It’s easy to use in CSS, works well with other colors, and looks great on both dark and light backgrounds. Whether you’re designing a website, creating a graphic, or simply exploring color combinations, #228B22 is a solid choice that brings life, balance, and a touch of nature to any project.
