How I may help
LinkedIn Profile Email me!
Call me using Skype client on your machine

Color Selection

This For/Background Color Selector helps us quickly see how various background and font colors look with each other.

  • ColorHunter: Get color numbers from a photo's URL.

     

    Topics this page:

  • Conversion Tool
  • Color My Eye
  • RGB Grayness
  • Color Names
  • Browser Safe Colors
  • Contrasting Colors
  • Complementary Colors
  • Opposite Colors
  • Color Pickers
  • Programming Color
  • Your comments???
  •  

    Site Map Go to a list of all pages on this sites
    About this site About/Help on this site
    First Topic


      Color Name: Red Green Blue Javascript feature Hex 6:   Hue Sat. Lum.

    Go to top of page



    Set this at top of window. Color My Eye

      The human eye recognizes color using three kinds of photoreceptor cone cells, each sensing a different band of light — Red, Green, and Blue (abbreviated as "RGB"). These are called the three "basic" colors.

      This is different than "primary" colors, which are red, blue, and yellow.

      Printer ink on magazines use a color model called "CMYK" for the Cyan, Magenta, Yellow, and blacK pigments that are blended to absorb light reflecting off the media. This is called "subtractive" Image Mode in Photoshop.

      Reminder HTML uses "additive" color values specified by the properties of light emitted from LCD monitors or gases

      The yellowish background on this website is R 255, G 255, B 200 (#ffffc8), which I use because it's supposed to be the most relaxing background for the human eye, according to some random website I've long forgotten about.

      Color Name r,g,b Hex 6 Hex 3 Sample
      *Black (CSS1) 0,0,0 #000000 #000  
      Dark Slate Gray 49,79,79 #2f4f4f -  
      none 51,51,51 #333333 #333  
      none 102,102,102 #666666 #666  
      Dim Gray 105,105,105 #696969 -  
      Slate Gray 112,138,144 #708090 -  
      Light Slate Gray 119,136,153 #778899 -  
      "Normal" *Gray (CSS1) 128,128,128 #808080 -  
      none 153,153,153 #999999 #999  
      *Silver (CSS1) 192,192,192 #C0C0C0 -  
      Light Gray 211,211,211 #d3d3d3 -  
      Gainsboro 220,220,220 #dcdcdc -  
      *White (CSS1)  256,256,256 #FFFFFF #FFF  

      Set this at top of window. RGB Grayness

      Black is the absence of light shining, so it's specified with zeros.

      White () light contains the maximum value of all three colors.

      "Normal" gray has equal amounts of all three primary colors at 50%, represented as decimal 128 or hex 80.

      Each 8-bit hex digit can have one of 16 values (from 0 through 9,A,B,C,D,E,F). So divide a decimal number by 16 for the first hex digit. Divide the remainder by 16 for the second hex digit.
      Alternately, multiply the first hex digit by 255 to convert it to decimal.

      RGB coloring is specified in Cascading Style Sheet coding one of several ways:

        color: rgb(255,255,255); // 3 decimals
        color: #FFFFFF; // hex triplet
        color: #FFF; // hex shortcut

      3-digit hex shortcuts are automatically converted by browsers doubling each digit such that #678 = #667788. Although more compact, they cannot be used to identify colors with non-repeating color values such as #ACD257.

      Since the maximum value of each hex "FF" is equivalant to decimal value 256, the RGB color space has 256*256*256 or 16,777,216 possible colors, while most humans can distinguish a gamut of about 10 million different colors.

      Photoshop uses a standard mix of the RGB channels for their grayscale conversion: Red=30%, Green=59% and Blue=11%. Supposedly this mix accounts for the human eye's sensitivity to different colors. The Gimp tutorial says this formula does a pretty nice job in the general case, but some images do not work as well with it, particularly if the green channel component is not strong.


    Go to top of page

    Set this at top of window. Color Names

      % Decimal Hex   
      100% 255 xFF *Red
      #FF0000
      *Lime
      #00FF00
      *Blue
      #0000FF
       75% 192 xC0 #C00000 #00C000 #0000C0
       69% 176 xB0 #B00000 #00B000 #0000B0
       60% 153 x99 #990000 #009900 #000099
       50% 128 x80 *Maroon
      #800000
      *Green
      #008000
      *Navy
      #000080
       25%  64 x40 #400000 #004000 #000040
       20%  51 x33 #330000 #003300 #000033

      Historically, the W3C CSS1 standard assigned only 16 names:

      • black, gray, silver, white
      • Less Saturated primary colors red, lime, blue
      • More saturated primary colors maroon, green, navy
      • Less saturated complementary colors aqua, fuchsia, and yellow.
      • More saturated complementary colors olive, purple, teal.

        Reminder The CSS1 color name "green" is not as saturated as the CSS1 color name "lime". "Orange" was added in CSS2.1.

      Caution! Do not use these 147 proprietary color names introduced with X11, then adopted by only Internet Explorer/Opera, then lately by SVG and CSS3.

      Do this! Select a color number and curson down/up to set different background colors. Click a gray button to convert.

    Set this at top of window. "Browser Safe" Hex Colors

    > From GREEN to BLUE >





    F
    r
    o
    m


    G
    R
    E
    E
    N



    t
    o



    R
    E
    D

    > From RED to BLUE >



    Javascript feature Generated by Javascript (instead of static HTML as in this page of 4096 these Hex 3 colors).

    This 6x6x6 table of color codes on the left displays the 216 "browser safe" color pallette for use on older (v4) internet browsers running on older computers which were only able to support 256 different colors.

    This palette was first published by webpage article Lynda Weinman, who notes that, since 2004, most monitors and browsers can handle more complex colors without "dithering".

    However, browsers on wireless devices (PDAs and cell phones) are again starting at version 4!

    Do this! Click on the color number to obtain a list of complementary colors from the amazing Netspade site by Jason Davies.

    Kelly Martin's Colorspace Explorer (Lab colorspace, version 3.04) and Cooperative Color Naming System.

    Idea A good rule of thumb is to take your background colour and compute Y = 0.3R + 0.59G + 0.11B. If Y exceeds 0.5, use black foreground text, otherwise use white."

    tool Color Scheme Calculator calculates triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations. Also converts the given colour to RGB and HSL.

    Idea The advantage of using HSL is that when you keep the brightness and saturation level constant, you will select colors that go well with each other. tool Bob Power's example.

    tool Freeware Eltima Absolute client program doesn't display HSL in percentage, but it's nonetheless a useful color scheme generator, color history builder, color scheme management system, and screen color grabber.

    Formulas to convert between color space schemes are defined in the book Fundamentals of Interactive Computer Graphics by Foley and van Dam (c 1982, Addison-Wesley).

    tool Eric Meyer's Color Blend online tool

    tool Many ways to select colors by Lisa Irby

      Go to top of page

    Set this at top of window. Contrasting Colors

      TOOL: Javascript feature Color Contrast Check allows users to specify a foreground and a background colour to determine if there is enough of a difference between them in brightness and contrast for someone having color deficits or when viewed on a black and white screen.

    Set this at top of window. Complementary Colors

      color mix By definition, complementary colors have equal amounts of two colors:

        Red Green Blue Bounces Color Name Absorbs
        00 FF FF green and blue Cyan/*Aqua red
        FF 00 FF red and blue Magenta/*Fuchia green
        FF FF 00 red and green *Yellow blue

      Cyan, magenta, and yellow — abbreviated as "CMY" — are also called "secondary" colors.

      Less saturated complementary colors:

        Red Green Blue Bounces Color Name Absorbs
        00 80 80 green and blue *Teal red
        80 00 80 red and blue *Purple green
        80 80 00 red and green *Olive blue

      Reminder To obtain the complement to a specific color, merely calculating the remainder from 255 or FF doesn't work for all colors. It's more reliable to first convert the number to the number of HSL Hue degrees, then add or subtract 180 degrees.

    Go to top of page

    Go to top of page

      The left-to-right arrangement of these 24 colors reflect the sequence of optical light wavelengths along the electro-magnetic spectrum range from red (longer 780 nanometers) to violet (shorter 380 nm).

      The Microsoft Windows system (and MSPaint) converts RGB to HSL incorrectly.

    HSL Color Pickers

      The vertical slider at the right specifies the "luminosity" value used in the "HSL" color system, where HSL stands for Hue, Saturation, and Lightness/Luminosity,

      Some use the word "Brightness" instead of "Luminosity" for "HSB", a color system defined in 1978 by A. R. Smith. This system is used by Apple computers and the GIMP graphics program.

      If you like sliders, HTML Color Picker at html-color-codes.info shows RBG and HSV values for each point on the slider.

      A function in the new CSS3 standard implemented so far only by newer Gecko-based browsers (Mozilla, Firebird/Firefox, K-Meleon) use HSL/HSB:

        color: hsl( 84, 60, 44 );
        

      Go to top of page

        "84" in the first parameter above is for "Hue", expressed as the number of degrees of a circle, a non-linear deformation of the RGB color space:

      red at the 0°/360 position;
      green at 120°
      blue at 240°

      Arranging the range of colors in a circle makes opposite colors intuitively easy to identify.

    "60" in the second parameter is the saturation percent, a measure of color "purity" — from 100% brightness down through pastels to 0% for gray. This is selected by the vertical position of the mouse in the GUI.

    "44" in the third parameter is the Luminosity / Lightness percent (100% is white, 0% is black, 50% is for "normal"/"pure" color).

    HSL is "symmetrical" to lightness and darkness, Unlike the HSV system.

    Macromedia Studio, Paint Shop Pro, Inkscape (starting from version 0.42) are all supporting HSL, as are photospectrometers which measure colors.

    Go to top of page

    Microsoft Color Pickers

      The hexagon in Microsoft's "Standard" Color Picker seen in Visio 2002, Word 2003, etc. are not intuitive. Unlike other color picker interfaces, pure colors are not in a corner:

      • red is the 2nd row up from the bottom onhex in from the right.
      • blue is the from the left/right outer ring or 2nd from the top/bottom hex.
      • green I don't know

      All colors use a combination of "browser safe" values 255 (xFF) - 204 (xCC) - 153 (x99) - 102 (x66) - 51 (x33) - 0.

      Microsoft's color octogon is made interactive at the
      TOOL: Javascript feature Color Picker at W3Schools.com.

      Even less intuitive are the color numbers used by VBScript recorded of actions in Excel 2003 to Format Data Series:

      Microsoft Excel 2003 Color Numbers

     
    visio2002.colorwheel.jpg

    Go to top of page

    Set this at top of window. Color Pickers

    by Marianne:

      Go to top of page

    Set this at top of window. Color Wheels

      The honeycomb color wheel of 216 colors from Visibone, is available as a poster.

      This color picker from Allscoop suggests web-safe, web-smart, and unsafe RGB color numbers as you mouse over.

      The color wheel of six conical regions by the (now-obsolete Ascensionware) by Daniel Prust allows you to click and hold down the left mouse button to gradually add color:

      Victor Engel gives you the color codes and sample coding for where your mouse points on his honeycomb color map:

      Javascript feature

      Go to top of page

      Go to top of page

    Availability of Colors

      Artists who use pigment paints create colors by mixing a limited number of tubes of paint.

      Donald A. Jusko's "Real Color Wheel" has white dots for colors which can be reproduced this way

    Go to top of page

    Other Alternatives to Specify Color

      HSV (Hue, Saturation, Value), also call HSB (with B for Brightness). RGB to HSV conversion algorithms

      HIE (hue, luminosity, and psychometric saturation)

      SIH (Saturation, Intensity, and Hue)

      The International Commission on Lighting (abbreviated CIE from its French name Commission Internationale de l'Êclairage) is the body responsible for international recommendations for photometry and colorimetry. In 1931 it defined the CIELAB (CIE L*a*b*) color space where the same distance within the space represent approximately equal color difference. Variables L*, a* and b* are plotted at right angles to one another.

      Pantone is a proprietary naming system (color space) the company uses to ensure accurate color on a variety of mediums (ink, paint, plastics, etc.). Their fan book has 1,757 numbered swatches of color.

    Go to top of page

    Programming to Specify Color

      CSS Scrollbar Color Changer generates CSS for colors picked.

      The following HTML example specifies a page with a white background, black text, blue links, and red visited links:

        <BODY bgcolor="#FFFFFF" TEXT="#OOOOOO" Alink="#0000FF" link="#0000FF" Vlink="#FF0000">

      Type of link HTML
      <body>
      Attribute
      Javascript feature Javascript
      Property
      CSS Class
      { Property
      Object Model
      Property
      Java
      method
      Background image BACKGROUND= . BACKGROUND-IMAGE: url('x.gif'); backgroundImage .
      Background color BGCOLOR bgColor BACKGROUND-COLOR backgroundColor setBackground
      Foreground color (of text) FGCOLOR fgColor color: #dda0dd
      color: rgb(0,0,255)
      . setColor
      The color of unvisited link text link= linkColor a:link {
      The (temporary) color of active link text Alink= alinkColor a:active {
      The color of visited link text Vlink= vlinkColor a:visited {
      text where mouse hovers - - a:hover {
      Border color (also Style and Width) . . border-color
      border-top-color
      border-bottom-color
      border-left-color
      border-right-color
      borderColor
      borderTopColor
      borderBottomColor
      borderLeftColor
      borderRightColor

      The Java coding to change the color to one of the standard colors using a method from the JDE package java.awt.Color:

        g.setColor( Color.blue );
        g.drawString( ... );

      Javascript feature Lloyd Dalton shows you Javascript coding for Color select control.


    Go to top of page

    Digging deeper...


    Go to top of page

    Related:

  • Website Development
  • HTML Coding

  • How I may help

    Send a message with your email client program


    Your rating of this page:
    Low High




    Your first name:

    Your family name:

    Your location (city, country):

    Your Email address: 



      Top of PageGo to top of page

    Thank you!