Steel Sky - #9EA9B1 - Color Chart : Shades, Tints & More
Red, Green, Blue
For screens
Cyan, Magenta, Yellow, Key
For printing
Hue, Saturation, Value
For color manipulation
Hue, Saturation, Lightness
Human-friendly format
Color Properties
Accessibility & Readability
Color Spaces
Number Systems
1. Background Colors
Set background colors for elements using the background-color property.
Black Backgroud With #9EA9B1
#9EA9B1
.bg {
background-color: #9EA9B1;
}White Backgroud With #9EA9B1
#9EA9B1
.bg {
background-color: #9EA9B1;
}2. Text Colors - Typography
Change text color using the color property.
Heading (H1-H6)
Color Bold H1
h1 {
color: #9EA9B1;
}Color Bold H2
h2 {
color: #9EA9B1;
}Color Bold H3
h3 {
color: #9EA9B1;
}Color Bold H4
h4 {
color: #9EA9B1;
}Color Bold H5
h5 {
color: #9EA9B1;
}Color Bold H6
h6 {
color: #9EA9B1;
}Paragraph
This is a sample paragraph used to demonstrate how text appears in a specific color. It helps users understand the visual impact of the selected color on readability. This example is intended only for display and preview purposes, allowing users to evaluate how the chosen color looks across different backgrounds and screen settings.
p {
color: #9EA9B1;
}Blockquote
"Lorem ipsum dolor sit amet, consectetur adipiscing elit." – Anonymous
blockquote {
color: #9EA9B1;
}3. Border Colors
Apply colors to borders using the border property.
.box-solid {
border: 5px solid #9EA9B1;
padding: 20px;
}.box-dotted {
border: 5px dotted #9EA9B1;
padding: 20px;
}.box-dashed {
border: 5px dashed #9EA9B1;
padding: 20px;
}.box-double {
border: 5px double #9EA9B1;
padding: 20px;
}.box-groove {
border: 5px groove #9EA9B1;
padding: 20px;
}.box-ridge {
border: 5px ridge #9EA9B1;
padding: 20px;
}.box-inset {
border: 5px inset #9EA9B1;
padding: 20px;
}.box-outset {
border: 5px outset #9EA9B1;
padding: 20px;
}4. Button Styling
Create colorful buttons by styling their background, text, and borders.
.themebutton {
background-color: #9EA9B1;
color:#fff;
border-radius: 5px;
}.themebutton {
background-color: transparent;
border: 2px solid #9EA9B1;
color: #9EA9B1;
}.themebutton {
background-color: #9EA9B1;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}Card Component Preview
Card Title
This is a card with a border in the primary color.
Card Title
This is a card with a border in the primary color.
Card Title
This is a card with a border in the primary color.
Color Spaces
HEX: Web hexadecimal format (#RRGGBB). Each pair is red, green, blue values from 00 to FF (0-255 decimal).
RGB: Additive color model for screens. Mixes red, green, blue light (0-255 each). Used in digital displays.
HSL: Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Human-friendly model matching color perception.
HSV: Hue (0-360°), Saturation (0-100%), Value (0-100%). Similar to HSL but with Value instead of Lightness.
CMYK: Subtractive model for printing. Cyan, Magenta, Yellow, Black percentages. Used in physical printing.
XYZ: Scientific color space based on human vision. X, Y, Z values represent all visible colors precisely.
CIELAB: Perceptually uniform space (L* lightness, a* green-red, b* blue-yellow). Matches human color perception.
LCH: Polar version of LAB (Lightness, Chroma, Hue). More intuitive for human color description.
Color Spaces Comparison
| Space | Components | Primary Use |
|---|---|---|
| HEX | #RRGGBB (hexadecimal) | Web design, CSS, HTML |
| RGB | Red, Green, Blue (0-255) | Screens, digital displays |
| HSL | Hue, Saturation, Lightness | Human-friendly color selection |
| HSV | Hue, Saturation, Value | Graphics software, color pickers |
| CMYK | Cyan, Magenta, Yellow, Black % | Printing, physical media |
| XYZ | X, Y, Z coordinates | Scientific color measurement |
| CIELAB | L* (lightness), a*, b* | Color difference, perception |
| LCH | Lightness, Chroma, Hue | Intuitive color description |
Number Systems Explained
Binary
Base-2 number system using only 0s and 1s. Each color channel (0-255) is represented as an 8-bit binary number. Fundamental system for computers and digital electronics.
Octal
Base-8 number system using digits 0-7. Each color value is represented with up to 3 octal digits (0-377). Less common but used in some older computer systems.
Decimal
Base-10 number system using digits 0-9. Standard human number system. Color values range from 0 to 255 for each RGB channel, representing intensity levels.
Percentage
Decimal values expressed as percentages (0-100%). Represents the proportion of maximum intensity for each color channel. 0% = no color, 100% = full intensity.
Color Properties Explained
Color Family
The primary color group based on hue position on the color wheel. Determines the basic color name like red, blue, or green. This is the most fundamental way we categorize colors.
Temperature
Warmth or coolness perceived from the color. Reds, oranges, and yellows are considered warm colors, while blues, greens, and purples are cool. Temperature affects mood and spatial perception.
Intensity
How pure and vivid the color appears. High intensity means bright, saturated colors with minimal gray, while low intensity means muted, desaturated colors. Also called saturation or chroma.
Colorfulness
How much the color differs from neutral gray. High colorfulness appears vibrant and chromatic, low colorfulness appears dull and achromatic. Related to but distinct from saturation.
Brightness
How light or dark the color appears. Ranges from very dark (near black) to very light (near white). Also called lightness or value. Different from intensity as a color can be bright but not intense.
Wavelength
The light wavelength that creates this hue, measured in nanometers (nm). The visible spectrum ranges from 380nm (violet) to 750nm (red). Each hue corresponds to a specific wavelength range.
Energy Level
Visual stimulation the color provides. High energy colors are active, exciting, and attention-grabbing, while low energy colors are calm, soothing, and passive. Affects viewer engagement.
Emotion
Feelings commonly associated with the color based on cultural, psychological, and biological factors. Different colors evoke different moods, memories, and emotional responses in viewers.
Accessibility & Readability Explained
Relative Luminance
The brightness of a color relative to pure white, calculated using a weighted formula that accounts for human perception. Higher values appear brighter to the human eye, ranging from 0 (black) to 1 (white).
Contrast (White)
The difference in luminance between the color and pure white background. Higher contrast ratios mean better readability against white. Minimum recommended contrast is 4.5:1 for normal text.
Contrast (Black)
The difference in luminance between the color and pure black text or background. Higher contrast ratios mean better readability against black. Essential for ensuring text is legible on dark interfaces.
WCAG AA
Web Content Accessibility Guidelines Level AA compliance. The minimum standard for web accessibility. Requires 4.5:1 contrast for normal text and 3:1 for large text (18pt+ or 14pt bold+).
WCAG AAA
Web Content Accessibility Guidelines Level AAA compliance. The enhanced standard for web accessibility. Requires 7:1 contrast for normal text and 4.5:1 for large text. Recommended for highest accessibility.
Readability
How easily text in this color can be read against common backgrounds. Based on contrast ratios and human perception factors. Good readability is essential for user experience and accessibility compliance.