Holi Edition • Colors in Web Pages Theme tokens: var() + calc() Converters • Palettes • Gradients • Contrast Practice: Embedded HTML Editor

Colors in Web Pages — Full Theory + Upgraded Interactive Lab

Every color you write in CSS becomes numbers that the screen can display. This page teaches the full theory (HEX, RGB, HSL, alpha, gradients), and then lets you practice immediately using a built-in lab and an embedded HTML editor.

Workflow: adjust the theme sliders → explore palette/converters/gradients → select an example → click Open Example in Editor to practice in a new tab.

Theory: How Web Color Works (In Full)

1) The screen is RGB light.

Every pixel is a tiny lamp mixing Red, Green, and Blue. So browsers ultimately render everything as RGB values.

  • rgb(255,0,0) is full red
  • rgb(0,255,0) is full green
  • rgb(0,0,255) is full blue

2) Why multiple formats exist.

  • HEX is compact and common in design systems.
  • RGB(A) matches the screen, good for alpha overlays.
  • HSL(A) is easiest for theming: rotate hue, keep saturation/lightness.

Professional theming often uses HSL tokens + derived colors.

HEX basics
#RRGGBB 
#ff0000  red
#00ff00  green
#0000ff  blue
#ffffff  white
#000000  black

Shorthand:
#f00 == #ff0000
#0f0 == #00ff00
#00f == #0000ff
HSL basics
hsl(h s% l%) 
Hue        0..360   (color wheel)
Saturation 0..100%  (vividness)
Lightness  0..100%  (brightness)

Example:
hsl(28 90% 55%)  (a saffron-like accent)

Alpha (transparency): use rgba(r,g,b,a) or hsl(h s l / a). Low alpha is how you get “glow”, glass panels, and soft backgrounds without destroying readability.

Palette Generator: One Hue → Full UI Palette

This is the most useful real-world trick: keep a few variables and derive the entire palette using var() + calc(). The swatches update live.

Live swatches
Paste into your site











Programmer’s Picnic — Holi Theme Preview
hsl(28 90% 55%)






 Accent from HSL tokens
Derived palette via calc()
Glow via HSLA alpha












                    In real apps: buttons, links, badges, charts, and highlights
                    all use the same tokens. Change hue once → entire UI stays
                    consistent.
                  















Converters: HEX ⇄ RGB ⇄ HSL (With Live Preview)



            Use these converters to understand how formats relate. Convert HEX
            to RGB, RGB to HEX, and view HSL. Also see a pure CSS trick: inverse
            color using calc(255 - var(--r)).
          







HEX ↔ RGB
numbers































































                    Tip: RGBA is best for overlays:
                    rgba(r,g,b,0.15) makes clean
                    glow/panel effects.
                  











Preview + HSL
perception








Live swatch
hsl(...)








                        The same color can be described in different formats.
                        Designers love HEX, developers love RGB, and theme
                        systems love HSL.
                      











Inverse color using CSS calc()
255 - rgb






                      This text uses inverse RGB
                    



                      rgb(var(--r), var(--g), var(--b))
                    



                      inverse: rgb(calc(255 - var(--r)), ...)
                    

















Gradient Builder (Copy the CSS)



            Gradients are multiple colors blended across space. Use angle +
            stops, then copy the CSS into your site.
          







Controls
linear-gradient






























































                    Pro trick: add a low-alpha glow layer above gradients for
                    depth without hurting readability.
                  











Gradient preview
background








Holi gradient panel
copy-ready






Glass panel

                      Combine gradients + alpha + blur for modern UI.
                    










Example




















Contrast Tester (Readability)



            Good-looking color is not enough. Text must be readable. This tool
            checks contrast between your accent and black/white text.
          









Interactive Practice: Embedded Editor + Open-in-New-Tab Tools



            Select an example, then either copy it, open it as a standalone
            preview, or open it in the editor in a new tab.
          




















Note: The editor is hosted on a different page. This
                  page can open it in a new tab and also store your example code
                  in localStorage under:
                  pp_open_example_html. If the editor
                  supports auto-loading, it can read that key. Either way, you
                  can always paste the code (you already copied it).
                











 Practice Editor (Embedded
                  Preview)
                



















Selected example (for reference)