InternshipColours and units
Hex, rgb and hsl colours, plus when to use px, rem, % and viewport units.
Colours
CSS
.a { color: tomato; } /* a named colour */
.b { color: #0f766e; } /* hex: red, green, blue */
.c { color: rgb(15 118 110); } /* the same teal as numbers */
.d { color: hsl(175 77% 26%); } /* hue, saturation, lightness */
.e { color: rgb(15 118 110 / 50%); } /* half transparent */Keep your brand colours in variables, so changing one line recolours the site.
CSS
:root {
--brand: #047857;
}
.button {
background: var(--brand);
}Units
| Unit | Use it for |
|---|---|
px | Borders and small fixed details |
rem | Font sizes and spacing. It follows the reader's browser font setting |
% | A share of the parent, such as width: 50% |
vw / vh | A share of the screen width or height |
fr | A share of the free space in a grid |