GedSite: - Color Editor

Overview

GedSite provides several methods for editing and/or choosing color values:

An editor where you set the color based on its component values (red, green, and blue)
A General Palette that includes a few hundred colors
A Theme Palette that includes the colors defined in the current Theme
A textbox where you can enter either a color name or a CSS format color code, i.e., #ff0000 for red, #00ff00 for green, etc.

This is an example of a GedSite color property:

screenshot of color property showing the property name, the Editor button, two palette buttons, and the text value

From left-to-right, the five parts of the property are:

The property name
The Editor button which shows the current color of the property. Clicking the button opens the Editor.
The General Palette button which opens a drop-down palette of 234 colors.
The Theme Palette button which opens a drop-down palette of the colors in the current Theme.
The text value of the property.

General Palette

The General Palette button opens a drop-down palette of 234 colors. Click the palette button to open the palette. When the mouse is over a color, the tooltip changes to reveal the hex CSS color code for that color. Click a color to select it and close the palette.

You may also use the keyboard to manipulate the General Palette button. Tab to the button, then press [Enter] or [F7] to open the palette. With the palette open, use the arrow keys to move the selection. Press [Enter] to select that color and close the palette.

Theme Palette

The Theme Palette button opens a drop-down palette showing all the colors in the current Theme. Some colors will be repeated because multiple properties in a Theme are often set to the same value.

The Theme Palette button operates the same way as the General Palette button except that the text value of the property is set to a reference value and not to the CSS color code. If you change the Theme, the color properties that refer to Theme colors will use the values from the new Theme.

So, for example, if you chose the Theme's border-color from the Theme palette, the property would look like this:

As shown above, the reference value is @theme-backcolor.border-color. That refers to the "border-color" property in the Colors, Backgrounds section. The color is light gray. If you change the Theme for the site, and the new Theme uses blue for borders, the property shown above would be updated to blue.

Editor

Click the Editor button to open the Editor:

The controls in the Editor window let you specify a color using one of two color models (RGB or HSB) and several controls to modify the components of the color.

Both color models use three values to specify a color. In RGB, the three values are red, green, and blue. In HSB, the three values are hue, saturation, and brightness.

Hex Color

The text value with the "#" label shows the hex color code, sometimes called a hex triplet. You may edit the text or copy and paste it from another source, such as the Color Scheme Designer by Petr Stanicek.

RGB Controls

Use the R (red), G (green), or B (blue) textboxes to set the value of the indicated RGB color component. Each value indicates how much of that component is present in the color. Specify a value from 0 to 255.

When you update one of the RGB values, the other RGB values will not change, but the hex color and HSB values will change.

HSB Controls

Use the H (hue), S (saturation), or B (brightness) textboxes to set the value of the indicated HSB component. Hue sets the main property of the color using an angle on the color wheel. The value ranges from 0 to 359. Saturation sets the intensity of the color and ranges from 0 to 100. Brightness sets the brightness of the color and ranges from 0 to 100.

When you update one of the HSB values, the other HSB values will not change, but the hex color and RGB values will change.

Color Grid and Color Slider

The color grid and color slider manipulate the three components of a color by changing one value via the slider and two values via the grid. The color value modified by the slider is determined by the currently selected radio button.

For example, if the R (red) radio button is selected, the slider will modify the red value, and the grid will modify the green and blue values. In the grid, the green value will increase as you drag the marker towards the top of the grid, and the blue component will increase as you drag the marker towards the right of the grid. This is evident in the screenshot where there is more green in the upper-left of the grid and more blue in the lower-right of the grid.

The slider background shows how the current color will change by altering the component the slider controls. For example, in the screenshot, the slider is controlling the red component. The slider background is yellow at the top and green at the bottom. Because there is more green than blue in the current color, if we increase the amount of red, the current color will become yellower, but if we reduce the amount of red, the current color will become greener.

You may click or click and drag with the mouse to move the marker or slider. You may also use the arrow keys to move the marker or the slider. The marker or slider will move further with each key press if you hold the [Ctrl] (control) key down when you press one of the arrows.

Editor Palette Buttons

The palette buttons in the Editor work the same way as the General Palette and the Theme Palette buttons in the property window.

Current Color and Original Color

The color swatches in the lower-right of the window next to the OK and Cancel buttons show the current color and the original color. The current color is the color specified by the current value of the controls in the window. The original color is the color of the property prior to any changes made in the Editor window.

OK and Cancel

If you click the OK button or press the [Enter] key, GedSite will update the current color property with the color specified by the controls in the color window and close the Editor window. If you selected a color via the Theme Palette button, the color will be set to a reference to the selected Theme color.

If you click the Cancel button or press the [Esc] (escape) key, GedSite will discard any changes to the color property and close the Editor window.

Color Names

GedSite recognizes the following color names.

#00FFFFaqua

#7FFFD4aquamarine

#66CDAAmedium aquamarine

#F0FFFFazure

#F5F5DCbeige

#FFE4C4bisque

#000000black

#FFEBCDblanched almond

#0000FFblue

#F0F8FFalice blue

#5F9EA0cadet blue

#6495EDcornflower blue

#00008Bdark blue

#1E90FFdodger blue

#ADD8E6light blue

#0000CDmedium blue

#191970midnight blue

#B0E0E6powder blue

#4169E1royal blue

#87CEEBsky blue

#87CEFAlight skyblue

#00BFFFdeep sky blue

#6A5ACDslate blue

#483D8Bdark slate blue

#7B68EEmedium slate blue

#4682B4steel blue

#B0C4DElight steel blue

#8A2BE2blue violet

#A52A2Abrown

#BC8F8Frosy brown

#8B4513saddle brown

#F4A460sandy brown

#DEB887burlywood

#7FFF00chartreuse

#D2691Echocolate

#FF7F50coral

#F08080light coral

#FFF8DCcornsilk

#DC143Ccrimson

#00FFFFcyan

#008B8Bdark cyan

#E0FFFFlight cyan

#B22222firebrick

#FF00FFfuchsia

#DCDCDCgainsboro

#FFD700gold

#DAA520goldenrod

#B8860Bdark goldenrod

#EEE8AApale goldenrod

#FAFAD2light goldenrod yellow

#808080gray

#A9A9A9dark gray

#696969dim gray

#D3D3D3light gray

#708090slate gray

#2F4F4Fdark slate gray

#778899light slate gray

#008000green

#006400dark green

#228B22forest green

#7CFC00lawn green

#90EE90light green

#32CD32lime green

#556B2Fdark olive green

#98FB98pale green

#2E8B57sea green

#8FBC8Fdark sea green

#20B2AAlight sea green

#3CB371medium sea green

#00FF7Fspring green

#00FA9Amedium spring green

#ADFF2Fgreen yellow

#F0FFF0honeydew

#CD5C5Cindian red

#4B0082indigo

#FFFFF0ivory

#F0E68Ckhaki

#BDB76Bdark khaki

#E6E6FAlavender

#FFF0F5lavender blush

#FFFACDlemon chiffon

#00FF00lime

#FAF0E6linen

#FF00FFmagenta

#8B008Bdark magenta

#800000maroon

#F5FFFAmint cream

#FFE4E1misty rose

#FFE4B5moccasin

#000080navy

#FDF5E6old lace

#808000olive

#6B8E23olive drab

#FFA500orange

#FF8C00dark orange

#FF4500orange red

#DA70D6orchid

#9932CCdark orchid

#BA55D3medium orchid

#FFEFD5papaya whip

#FFDAB9peachpuff

#CD853Fperu

#FFC0CBpink

#FF1493deep pink

#FF69B4hot pink

#FFB6C1light pink

#DDA0DDplum

#800080purple

#9370DBmedium purple

#FF0000red

#8B0000dark red

#FA8072salmon

#E9967Adark salmon

#FFA07Alight salmon

#FFF5EEseashell

#A0522Dsienna

#C0C0C0silver

#FFFAFAsnow

#D2B48Ctan

#008080teal

#D8BFD8thistle

#FF6347tomato

#40E0D0turquoise

#00CED1dark turquoise

#48D1CCmedium turquoise

#AFEEEEpale turquoise

#EE82EEviolet

#9400D3dark violet

#C71585medium violet red

#DB7093pale violet red

#F5DEB3wheat

#FFFFFFwhite

#FAEBD7antique white

#FFFAF0floral white

#F8F8FFghost white

#FFDEADnavajo white

#F5F5F5white smoke

#FFFF00yellow

#FFFFE0light yellow

#9ACD32yellow green