Bhylu

HTML Colors

Colour values describe presentation in CSS. A consistent palette makes a page feel connected, but meaning should not depend on colour alone.

How it works

  • CSS accepts named colours and numeric forms including RGB, hexadecimal, and HSL. They are different ways to describe colour.
  • Use colour together with text or an icon for status. A red border alone does not tell everyone that a field has an error.
  • Check contrast for text at its actual size and background. A palette that looks attractive in large blocks may be difficult to read in small labels.

A practical example

HTML

<style>
.notice { color: #164e45; background: #edf8ef; padding: 1rem; }
.error { color: #8f1d1d; }
</style>
<p class="notice">Registration opens on Monday.</p>
<p class="error">Error: enter a valid email address.</p>

The notice uses a foreground and background pair. The error communicates its meaning with the word “Error”, not just a change of colour. Move the style block into the CSS panel when previewing.