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
  • Famous Colors
  • Color My Eye
  • RGB Grayness
  • CMYK Colors
  • HSV
  • Pantone
  • 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 Conversion Tool

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

    Go to top of page



    Famous Colors on logos

    Color Psychology Folklore

    Meanings of Color Varies

    Set this at top of window. Color My Eye RGB

      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.

      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

      Reminder HTML uses "additive" color values specified by the properties of light emitted from LCD monitors which produce color by electrifying various gases .

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

      White light contains the maximum value of all three colors. This is why some mobile phone users use a black background to preserve battery life.

      "Normal" gray has equal amounts of all three primary colors at 50%, represented as decimal 128 (hex 80), which is midway to the maximum 256.

      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.

      This Gimp tutorial on grayscale describes and compares different techniques on how to turn color photos into grayscale.

      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.


    Go to top of page

    Set this at top of window. Contrasting Colors

    Pantone Colors

    CMYK Subtractive Colors

    HSV

    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

      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.

      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.

      147 proprietary color names were introduced with X11, then adopted by only Internet Explorer/Opera, then lately by SVG and CSS3.

      Color names of course reflect nature:

      • Pastel tones - pink to yellow
      • Pastel tones - lavender, moss green, rust
      • Darker pastel tones - blue, green, gold
      • Grey, brown, orange, and flesh tones
      • Gem tones - lapis lazuli, amethyst, garnet
      • Gem tones - aquamarine, emerald, jade

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

      Javascript feature The blocks of color are 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.

      > From GREEN to BLUE >





      F
      r
      o
      m


      G
      R
      E
      E
      N



      t
      o



      R
      E
      D

      > From RED to BLUE >

    Set this at top of window. Color Theory

    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

    Set this at top of window. Opposite Color Range

    Go to top of page

    Colors in Google's Material Design

    Go to top of page

    Alpha Channel

    Alpha % Hex Usage
    100% FF #000000
    12% 1F Dividers
    26% 42 Disabled / Hint Text
    54% 8A Secondary Text / Icons
    87% DE Text
     

      Android mobile apps uses Hex ARGB (or RGBA) values formatted as #AARRGGBB, where the AA is a hex number representing the Alpha Channel to designate the extent of transparency. To derive this hex value from a opacity percentage, first multiple the percent to 255 and round the result up or down.

      TOOL: Input the number and click convert or manually lookup a TOOL: table to convert between Hex and numeric equivalents

      A zero returned should have a zero in front of it (padding).

      The above makes use of the standard Alpha blending equation:

      out = alpha * new + (1 - alpha) * old

    HSL Color Pickers

      HSL Stands for Hue, Saturation, and Luminosity. To specify font color in CSS3 using HSL/HSB:

      color: hsl( 84, 60, 44 ); # degrees, percent

        "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 makse for smooth change in hue values from 0 (red) to 1 (violet). Arranging the range of both RGB and CMY colors in a circle makes opposite colors intuitively easy to identify. A mnemonic for this is “Young Guys Can Be Messy Rascals”.

          yellow at 60°
          green at 120°
          cyan at 180°
          blue at 240°
          magenta at 300°
          red at the 0°/360 position;

        "60" in the second parameter is the saturation percent, a measure of color "purity" — from 100% brightness down through pastels to near 0% for a light tint. 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.

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

      This system is used by Apple computers and the GIMP graphics program. Macromedia Studio, Paint Shop Pro, Inkscape (starting from version 0.42) are all supporting HSL, as are photospectrometers which measure colors.

      This graphic is from a great tutorial on color theory from Thinkful.com

      Because HSL has a fixed order, comparisons can be made between years visually, as Vijay P did in his Colours in movie posters 1914-2012.

      Some use the word "Brightness" instead of "Luminosity" for "HSB", a color system defined in 1978 by A. R. Smith.

    Microsoft Color Pickers

      The Microsoft Windows system (and MSPaint) converts RGB to HSL incorrectly. 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,

      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

      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

      Paletton (previously at WellStyled.com) includes a simulation of what colors look like to those "color blind". (Approximately 8% of men and 0.5% of women are). About 35% of peole over the age of 60 have measurable difficulty discriminating different shades of blue.

      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!