Why" light"? W3Schools’ Color Picker tool visually explains hue by examining one color at a time. Color Picker features a Lighter/Darker scale based on the total luminosity or TL of a specific color, followed by Hue, followed by Lightness. Each color lightness (R+G+B=TL, expressed as %) may or may not appear as ‘brighter’ depending on existing individual color blindness (we are all measurably color blind). However, this 'light' scale is graded in 20 5% steps between 0 and 100%. nc values seldom match W3Shools stepping: that is, each color TL seldom is an exact integer of 5 or 10. For example, in the Color Picker the nc "Pink" is 88%, between but not on any of the 20 lighter 100% to darker 0% Color Picker steps.
So counting balanced 5% or 10% steps we cannot include pink as part of even increments in the Color Picker. Pink is displayed as an offset between 85% and 90%. Offset does not occur for nc colors with hex pairs (e.g., red 50% is #ff0000 with 3 hex pairs - see below, why 8). Pairing hex colors always fall exactly in a '5' or '10' increment! The implications of light have engaged science for millennia and are not fully understood. We provide light values as a lighter-to-darker palette, with hex values. The lightness ranges from 0% for black to 100% for white.
Why "hue"? W3Schools decided to guide students to pick colors while respecting the luminous intensity of each color by matching that intensity to a rainbow of colors. The rainbow colors that display hue are red-yellow-green-cyan-blue-magenta-red: 6 base colors in twenty shade-steps, so that 20 colors meld into each other in 20 evenly spaced Color Picker hues. The brightness of each hue rainbow matches the lightness of the color examined by the Color Picker (TL). So the yellow Hue rainbow is brighter than the blue Hue rainbow. Each rainbow uses the TL % increments 0-15-30-45-60-75-90-105-120-135-150-165-180-195-210-225-240-255-270-285-300-315-330-345-360. The hue angle (also known as color stop) ranges from 0 to 360 degrees.
Why not shade? Light scales and shade scales both display darkness around any particular color. KunRuch Creations provides the perfect tool to display a fully luminous gradient or color depth in a light-dark scale. White saturation on left melds into black saturation on the right, gets deployed in a shade scale: MDiGi Color Shades Generator, that is similar to W3’s Color Picker Saturation scale, except that the later only offers midrange grey saturation. All that being appreciated, the shade scale looks almost identical to the light scale. We chose light over shade, to display and compare appearance for all nc.
Why 8 samples in each color scale? HTML color is most often coded as a hexadecimal value.
hex·a·dec·i·mal relating to or using a system of numerical notation that has 16 rather than 10 as its base: a string of hexadecimal characters, abbreviated and spoken as "hex"
Hex color commonly uses 6 digits: #rrggbb. Color Picker uses hex to scale 20 Lighter/Darker shades from 0% to 100% for each nc and and scales 24 hex hues from 0ᴼ to 360ᴼ for each nc. From the Color Picker, we take 8 of the Lighter/Darker values (15% 25% 35% 45% 55% 65% 75% 85%) and 8 hues (0ᴼ 45ᴼ 90ᴼ 135ᴼ 180ᴼ 225ᴼ 270ᴼ 315ᴼ). 8 shades and 8 hues for each nc.
Color hexadecimal values are the most popular code format. 16 character-values 0-1-2-3-4-5-6-7-8-9-a-b-c-d-e-f create web hex color in the CSS format color: #123abc01;. 6 alphanumeric characters 123abc describe color rrggbb. 2 following numeric characters (if present) 01-99 describe transparency.
Like rgb color, hex color uses red-green-blue mix. Hex alphanumeric value rrggbb is base-16. So, hex is more compact than rgb, because base 16 or 16-bit hex has 6 more digits than the base-10 or 10-bit rgb. Where rgb requires 18 characters and spaces rgb(rrr, ggg, bbb), hex only needs a hash # and 6 characters #rrggbb to describe the same color!
For example, pink is hex #ffc0cb, or rgb(255, 192, 203). The TL (total luminosity) for Pink is 650 (255+192+203=650). Color rgb is useful for calculating total luminosity, by adding rrr+ggg+bbb=TL. TL helps us to sort nc color groups. In each color group, nc are scaled from highest TL to lowest TL. That is, from brightest to darkest color.
TL ignores human color blindness!
Color theme schemes:
monochromatic,
analogous,
complementary,
triadic
and
compound.
The hex and the rgb values for nc are listed at HTML Color Groups and are also shown in Color Picker.
On this page, a collection of all 140 nc link between simple color group blocks of each nc and light/hue samples for each nc below those simple blocks.
Schools teach lots about colors. So each color‘s breakouts may promise far more extension than we have space for here. We simply show color samples with code clips to copy and reproduce demonstrated color samples. We keep all 140 named color data on just one page.
Each named color features in 2 parts, Names and Kinds. Names features each nc in a single floating color data block: e.g., Pink block floats left of similarly floating LightPink Name block. Kinds features each nc in a stacked table block with light and hue resource. W3Schools resource HTML Table Colspan & Rowspan defines our simple table construction, for those who want to build something similar.
W3 Schools opens shades, mix and many other color resources on many pages. Here we deploy Names and Kinds using friendly fonts Comic Mono (a free Github resource) and Comic Neue (a free Google resource). Many thanks to all, in those two domains.