The hexadecimal color code #3399ff after converting to RGB will be written as the following values: 51, 153, 255. And when converting to HSL - 210, 100%, 60%
The hexadecimal system is based on the number 16. The numbers in the hexadecimal sequence are as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Numbers from 10 to 15 replaced by Latin letters. Numbers greater than 15 in this system are formed by combining two numbers into one.
The HEX value consists of three colors (#rrggbb, where r-red, g-green, b-blue. Each of the three colors - red, green and blue - can range from 00 to FF.
Color #3399ff is light. Its brightness level is - 134.13 (the brightness level is counted as a number in the range from 0 to 255).
The full HEX color #3399ff in RGB will look like this:
rgb(51, 153, 255);
In rgb(x, x, x), 'x' is numbers from 0 to 255 that represent the amount of the corresponding color (red(RED), green(GREEN), blue(BLUE)).
When writing colors in HTML / CSS, HEX or RGB values are most often used. You can also use keywords for named colors. Currently modern browsers can provide HSL support as well.
The complete HEX of color #3399ff in HSL will look like this:
hsl(210, 100%, 60%);
HSL is another type of color notation in HTML / CSS. The name of this format consists of the first letters of the values from which the color is assembled. Hue, Saturate, Lightness.
Hue the value of the color on the color wheel, which is specified in degrees. 0 ° corresponds to red, 120 ° to green, 240 ° to blue. The hue value can range from 0 to 359.
Saturate - the intensity of the color, measured as a percentage from 0% to 100%. A value of 0% is no color and a shade of gray, and 100% is the maximum saturation value.
Lightness - is a value that shows how bright the color is and is indicated as a percentage from 0% to 100%. A lower value is darker, and a higher value is lighter (0% is white and 100% is black).
| Color: | |
| HEX: | #3399ff |
| RGB: | rgb(51, 153, 255) |
| HSL: | hsl(210, 100%, 60%) |
Color #3399ff in grayscale (#999999):
| #999999 |
The complimentary color for #3399ff is #ff9933.
A complimentary color is one that is opposite in the color wheel. Complementary colors reinforce each other, and when mixed, give a neutral gray without shades.
| #ff9933 |
Triad (combination of 3 equally spaced colors) for color #3399ff:
| #3399ff | |
| #ff3399 | |
| #99ff33 |
Tetrad (color scheme, a special variant of the dual color scheme with equal spacing between all colors. All four colors are evenly distributed around the color wheel, resulting in no clear dominance of one color) for color #3399ff:
| #3399ff | |
| #ff33ff | |
| #ff9933 | |
| #33ff33 |
A palette of similar colors for #3399ff (generated based on a 30-degree rotation of the color wheel):
| #3399ff | |
| #33ebff | |
| #33c2ff | |
| #3399ff | |
| #3370ff | |
| #3347ff |
Monochromatic color palette for #3399ff:
| #3399ff | |
| #08192a | |
| #113355 | |
| #194d80 | |
| #2266aa | |
| #2a7fd4 |
Table with the result of various manipulations (lightening, darkening, etc. with a step of 5%) over the color #3399ff:
Background color (background-color).
Code:
<h1 style="background-color:#3399ff;">Title text h1</h1>
<h1 style="background-color:rgb(51, 153, 255);">Title text h1</h1>
<h1 style="background-color:hsl(210, 100%, 60%);">Title text h1</h1>
Цвет текста (color).
Код:
<h1 style="color:#3399ff;">Title text h1</h1>
<h1 style="color:rgb(51, 153, 255);">Title text h1</h1>
<h1 style="color:hsl(210, 100%, 60%);">Title text h1</h1>
Border color (border-color).
Код:
<h1 style="border-color:#3399ff;">Title text h1</h1>
<h1 style="border-color:rgb(51, 153, 255);">Title text h1</h1>
<h1 style="border-color:hsl(210, 100%, 60%);">Title text h1</h1>
It is also worth noting that the RGB and HSL color formats support an alpha channel (RGBa, HSLa), which sets the transparency level of the color. The alpha channel is written as a fourth value, which can take a value from 0 to 1, where 0 is completely transparent and 1 is opaque.
Format:
rgba(R, G, B, a);
hsla(H, S%, L%, a);