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.,
#00ff00for green, etc.
This is an example of a GedSite color property:
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.
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.
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.
Click the Editor button to open the Editor:
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.
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.
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.
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.
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 control key down when you press one of the arrows.
Editor Palette Buttons
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.
GedSite recognizes the following color names.