Widget resources
Initial widgets for application window can be created by using the widget definition file. Widget definitions compiles to C, and is further compiled and linked as static part of the application. Provided widget definition compiler is written in perl, which handles widget syntax explained below. When widget definitions is compiled, resulting file widget_defs.h is produced. Compatible file can be produced by some other mechanism if provided compiler or widget definition syntax feels discomfortable.
Widget resource compiler expects input file to be UTF-8 encoded, and supports include-directive, so resource file can be divided into several files:
include "the_other_widget_file.w2c"
In addition to widget definition file, widget_*() functions can be used to create and manipulate some of the widget parameters at runtime.
Provided widget set looks a bit like knobs in some old school audio equipment, see widgets example screenshots. Widget graphics can be replaced with some effort, see Custom widgets section at the bottom of this page for details.
Widget set has couple of widget types: background, block, label, lamp, led, pushbutton, turnswitch and slideswitch. Also support for toggleswitch widget exists, but no graphics is provided for it, therefore it is not documented here. There is no support for widgets familiar in other, more general user interface libraries, like scrollable text lists, text input fields, or ordinary rectangular and gray buttons with text in it. User interface can be extended in to that direction, for example, by using Redtools requester library, which is a part of Detroit engine.
Definitions
Widget definition file has widgets listed in top of each other. Before any widget definitions there must be a window definition to tell which window the following widgets are drawn. This value must match to WIDGET_STACK_ID which is passed to window_open() function when window is created in Ano script.
Inside the window block, a set block must be defined. One or more widget can form a set. Visible widget set can be changed by calling widget_change_set() function which takes set number as parameter. Set 0 is a special case, widgets defined under this set are always on window regardless of the currently active set, in other words, they are member of every set.
Widget definition file can also contain header tags to affect widget appearance and set some common defaults. Tags must be commented out and they must start with @. Tags include:
@WIDGET_DEFAULT_COLOR rgb:#ffffff default widget color, for example block @WIDGET_DEFAULT_HUE 0 default widget hue value @WIDGET_DEFAULT_LIGHT no default lamp or led light on state, yes or no @WIDGET_DEFAULT_STATE enable default widget state, enabled or disabled @WIDGET_DEFAULT_STICKY no default pushbutton mode, can be yes or no @WIDGET_DEFAULT_TITLE_CHARSET UTF-8 default title charset @WIDGET_DEFAULT_TITLE_COLOR rgb:#ffffff default title font color @WIDGET_DEFAULT_TITLE_DPI 96 default title font DPI @WIDGET_DEFAULT_TITLE_FONT path_to_the_font_file default title font file @WIDGET_DEFAULT_TITLE_JUSTIFICATION center default title justification @WIDGET_DEFAULT_TITLE_POSITION above default title position relative to widget @WIDGET_DEFAULT_TITLE_SIZE 11 default title font size in 1/64th points @WIDGET_DEFAULT_TRIGGER constant default for widget 'trigger' parameter, can be one of: constant alias drag, or release alias once @WIDGET_DEFAULT_TYPE 0 default for widget 'type' parameter @WIDGET_DEFAULT_VALUE 0 default for widget 'value' parameter @WIDGET_USE_BOUNDING_BOXES no if set to yes, draw a bounding box around the widget and its shadow, for debug use only to help leveling
Widget example, this is Vesmir example program widget definition:
; ; @WIDGET_USE_BOUNDING_BOXES no ; window "1" { set "0" { widget "background" { name "background" state enable image "examples/datafiles/background.tga" } widget "label" { name "help" state enable position x = 20, y = 580 label "LMB + mouse to move view, wheel to zoom, enter to select, backspace to previous view", \ charset = UTF-8, size = 8, \ color = rgb:#ffffff, \ justification = left } widget "pushbutton_2" name "render_object" state enable type 3 position x = 40, y = 100 title "Render object", \ charset = UTF-8, size = 10, \ color = rgb:#ffffff, \ justification = center, \ position = above, x = 0, y = -10 sticky no action push = cb_push_renderobject } widget "pushbutton_2" { name "print_object" state enable type 3 position x = 160, y = 100 title "Print object", \ charset = UTF-8, size = 10, \ color = rgb:#ffffff, \ justification = center, \ position = above, x = 0, y = -10 sticky no action push = cb_push_printobject } widget "pushbutton_2" { name "save_object" state enable type 3 position x = 280, y = 100 title "Save object", \ charset = UTF-8, size = 10, \ color = rgb:#ffffff, \ justification = center, \ position = above, x = 0, y = -10 sticky no action push = cb_push_saveobject } widget "pushbutton_2" { name "view_reset" state enable type 1 position x = 440, y = 100 title "View reset", \ charset = UTF-8, size = 10, \ color = rgb:#ffffff, \ justification = center, \ position = above, x = 0, y = -10 sticky no action push = cb_push_viewreset } widget "pushbutton_2" { name "time_reset" state enable type 1 position x = 560, y = 100 title "Time reset", \ charset = UTF-8, size = 10, \ color = rgb:#ffffff, \ justification = center, \ position = above, x = 0, y = -10 sticky no action push = cb_push_timereset } widget "turnswitch" { name "time_warp" state enable type 1 position x = 670, y = 60 angle min = 5, max = 355 steps start = 2, total = 1000 title "Time warp", \ charset = UTF-8, size = 10, \ color = rgb:#ffffff, \ justification = center, \ position = above, x = 0, y = -5 trigger constant action turn = cb_turn_timewarp } } }
Background
Background widget sets the window background. Background can be either solid color, a translucent color or an image file. If image file is too large for the window it will be cropped, too small file will be tiled to fill the whole window. If color is used instead of an image, alpha value can be used to adjust background widget translucency. Alpha value of zero makes completely transparent background, and alpha value of 255 makes completely opaque color.
Example:
widget "background" { name "my_background" state enable ; This color definition is 100% opaque (alpha is 0xff) ; color "rgba:0x804020ff" ; This color definition is 100% transparent (alpha is zero) ; color "rgba:#80402000" image "@/path/background.tga" hue 0.0 value 0.0 }
Block
Block window makes rectangular object filled either single color or image file. If image file is too large for the block size it will be cropped, too small file will be tiled to fill the whole block.
Example:
widget "block" { name "my_block" state enable position x = 100, y = 100 size width = 400, height = 20 ; color "rgb:ee4422" image "@/path/block.tga" border color = rgb:#ff00ff, thickness = 2 action keypress = cb_key_press }
Label
Label widget makes a single line of text.
Example:
widget "label" { name "my_label" state enable position x = 100, y = 100 label "This is label", \ charset = UTF-8, font = , size = 16, dpi = 0, \ color = rgb:#aa8844, \ justification = left }
Lamp
Lamp widget is just like any lamp, usually indicating something when it lights. Lamp has six subtypes, explained in type section below. Lamp can be set on and off by widget_step_set() function.
Example:
widget "lamp" { name "my_lamp" state enable type 1 position x = 100, y = 100 title "This is lamp", \ charset = UTF-8, font = , size = 11, dpi = 0, \ color = rgb:#aa8844, \ justification = center, position = left, x = 20, y = 0 light no hue 0.0 }
Led_1, Led_2, Led_3
Led is like a lamp, but smaller, and usually indicates that some minor function is turned on. Led has three types; type 1 round shaped led, type 2 is horizontal rectangle, and type 3 is vertical rectangle. Each type has six subtypes, explained in type section below. Led can be set on and off by widget_step_set() function.
Example:
widget "led_1" { name "my_led" state enable type 1 position x = 100, y = 100 title "This is led", \ charset = UTF-8, font = , size = 9, dpi = 0, \ color = rgb:#aa8844, \ justification = center, position = below, x = 0, y = 0 light no hue 0.0 }
Pushbutton_1, Pushbutton_2, Pushbutton_3
Pushbutton widget is the one to push to get something done. Pushbutton has three types; type 1 is small square button, type 2 is also a square but a bit bigger, and type 3 is shaped as horizontal rectangle. Each type has six subtypes, explained in type section below.
Example:
widget "pushbutton_1" { name "my_pushbutton" state enable type 1 position x = 100, y = 100 title "This is pushbutton", \ charset = UTF-8, font = , size = 11, dpi = 0, \ color = rgb:#aa8844, \ justification = center, position = above, x = 0, y = 10 sticky yes hue 0.0 action push = cb_push, \ keypress = cb_key_press, \ buttonpress = cb_btn_press, \ buttonrelease = cb_btn_release }
Slideswitch
Slideswitch widget works like a slider in mixing table. Slideswitch has six subtypes, explained in type section below.
Example:
widget "slideswitch" { name "my_slideswitch" state enable type 1 position x = 100, y = 100 slide length = 150, start = 1, total = 100 title "This is slideswitch", \ charset = UTF-8, font = , size = 11, dpi = 0, \ color = rgb:#aa8844, \ justification = center, position = above, x = 0, y = 0 ; trigger release trigger constant hue 0.0 action slide = cb_slide, \ buttonpress = cb_btn_press, \ buttonrelease = cb_btn_release }
Turnswitch
Turnswitch widget is round-shaped knob which can be turned back and forth, like volume knob in audio amplifier. Turnswitch has six subtypes, explained in type section below.
Example:
widget "turnswitch" { name "my_turnswitch" state enable type 1 position x = 100, y = 100 angle min = 45, max = 315 steps start = 1, total = 100 title "This is turnswitch", \ charset = UTF-8, font = , size = 11, dpi = 0, \ color = rgb:#aa8844, \ justification = center, position = above, x = 0, y = 0 ; trigger release trigger constant hue 0.0 action turn = cb_turn, \ buttonpress = cb_btn_press, \ buttonrelease = cb_btn_release }
Keywords
Angle
Range of the widget. For example, volume knob's minimum range is around 45 and maximum usually around 315 degrees. Needed attributes:
- min, minimum allowed angle in degrees, minimum allowed value is 0
- max, maximum allowed angle in degrees, maximum allowed value is 359
Needed by: turnswitch.
Border
Border color, its alpha channel value (transparency) and thickness to draw around the widget. Set alpha channel value to zero not to draw border. Needed attributes:
- color, border color in rgba:#rrggbbaa (red, green, blue, alpha) format
- thickness, border thickness in pixels
Needed by: block.
Color
Widget color and alpha channel value (transparency). Color definition must be double quoted. Format is:
- rgba:#rrggbbaa
The pound sign # in front of rgba (red, green, blue, alpha) value is optional, it can be replaced with 0x or leave out completely, so valid format also includes:
- rgba:0xrrggbbaa
- rgba:rrggbbaa
Also, individual color components can be dropped out too:
- rgb:rrggbb, rgb (red, green, blue) color without alpha value
- r:rr, only red color component
- rb:rrbb, red and blue color components
Color definition supports X11 named colors in addition to above. For example, if color value is banana, it maps to rgb value of 0xe3cf57 (red: 0xe3, green: 0xcf, blue: 0x57). All possible color names are listed in color chart, and possibly system rgb.txt file, which usually located at <X11_root>/lib/X11/rgb.txt or somewhere nearby.
Supported by: block and background.
Hue
Adjust the hue value of the widget in HSV color space. This can, for example, use to finetune green lamp to look a bit more or less green. Hue value is measured in degrees on HSV color wheel where range starts from 0 (no adjust) to 359, where actual widget color stands at 0 degree position. Keep temperance in mind when setting hue values, as widget graphics are cached by hue value for faster drawing, which can take a considerably amount of memory.
Supported by: background, lamp, led_*, pushbutton_*, slideswitch, turnswitch.
Image
Image to use to fill the widget. If image file is too large for the widget it will be cropped, too small file will be tiled to fill the whole widget. Supported file formats for images are BMP and TGA, unpacked true color, alpha channel recommended for transparency. If this strings starts with @, it is substituted with application installation prefix, so if image is /where/ever/app/is/installed/share/images/someimage.tga, that can be written to widget definition as @/share/images/someimage.tga. Using this trick is recommended, because paths will work even if installation prefix changes.
Supported by: background and block.
Label
Label for the widget. Label string to be displayed must be defined as a first attribute in double quotes. Other needed attributes:
- charset, charset to use with this label, leave out for default
- color, label color as explained in color keyword section, leave out for default
- dpi, label dots per inch value, leave out or use 0 for default
- font, font file for this label, leave out for default
- justification, label justification, either left, right or center, or leave out for default
- size, label string size in 1/64th points, leave out for default
Additional attributes for title keyword:
- position, label string position relative to widget position, either above, below, left or right, or leave out for default
- x, label string horizontal finetune offset relative to widget coordinates
- y, label string vertical finetune offset relative to widget coordinates
Needed by: label, lamp, led_*, pushbutton_*, slideswitch, turnswitch.
Light
Either yes, enable, true or 1 if the light is on initially, or no, disable, false or 0 if not.
Needed by: lamp and led_*.
Name
Unique name or other identifier of the widget. Keep as short as possible. This must be supplied to almost all widget_*() functions.
Needed by: all.
Position
Widget position in pixels from upper left corner of the container window. Needed attributes:
- x, position in pixels from left edge of the container window
- y, position in pixels from top edge of the container window
Needed by: all except background.
Size
Widget dimensions in pixels. Needed attributes:
- width, width in pixels
- height, height in pixels
Needed by: block.
Slide
Slideswitch slider attributes. Attributes include:
- length, length of the slide in pixels, either horizontally or vertically, depending on slider type
- start, initial step for slider, starts counting from 0
- total, total steps within length of the slider
Needed by: slideswitch.
State
Initial state of the widget, either enable, true or 1 if the widget is initially enabled, or disable, false or 0 if not.
Needed by: all.
Steps
- start, initial step for the widget, starts counting from 0
- total, total steps between minimum and maximum angles, for example, volume knob may have 100 steps or so, while on/off knob has only two
Needed by: turnswitch.
Sticky
Makes button sticky. Sticky buttons keeps its position pressed until pressed again. Unsticky buttons pops back to off state when released. Can be either yes, enable, true or 1 if the button is sticky, or no, disable, false or 0 if not.
Needed by: pushbutton.
Title
See label.
Trigger
Set the callback function trigger mode, can be either constant alias drag or release alias once. Constant/drag means callback is called continuously while widget is being turn, release mode triggers callback only once when widget is released.
Needed by: slideswitch, turnswitch.
Type
Subtype of the widgets.
lamp and led_* subtypes are:
- 0, red light
- 1, orange light
- 2, white (blueish) light if lamp, yellow if led
- 3, green light
- 4, blue light
- 5, purple light
pushbutton_* subtypes are:
- 0, red button
- 1, yellow button
- 2, white button
- 3, green button
- 4, blue button
- 5, purple button
slideswitch subtypes are:
- 0, horizontal knob, looks like common mixing console slider
- 1, vertical version of the above
- 2, horizontal knob, like a thin slider usually seen in equalizers
- 3, vertical version of the above
- 4, horizontal round shaped slider
- 5, vertical version of the above
turnswitch subtypes are:
- 0, large chicken head knob
- 1, small chicken head knob
- 2, large flat-top knob
- 3, small flat-top knob
- 4, large seven-star knob
- 5, small seven-star knob
Needed by: lamp, led_*, pushbutton_*, slideswitch, turnswitch.
Value
Adjust color value of the widget in HSV color space. Color value is measured in degrees on HSV color wheel where range starts from 0 (no adjust) to 359, where actual widget color stands at 0 degree position.
Needed by: background
Actions and callbacks
Most widgets can have Ano script callback functions attached to them for certain events. Each action event is explained below. See explanation of callback annotations here.
Button press callback
Generic callback function to call when button is pressed on widget. Callback function must have seven parameters as shown below. Each parameter is initialized as explained in XButtonEvent(3).
Supported by: all, including background.
Example:
_WIDGETCB_BUTTON_ callback cb_btn_press (window_handle, \ _x, _y, _x_root, _y_root, _state, _button) { ; ; _state parameter is initialized as bitmask, telling if there is ; some special key pressed when this event occurred. Bits include: ; ; dec bin ; 1 0000000000000001 (ShiftMask) is set when shift key is pressed, ; 2 0000000000000010 (LockMask) is set when caps lock is on, ; 4 0000000000000100 (ControlMask) is set when control key is pressed, ; 8 0000000000001000 (Mod1Mask) is set when alt key is pressed, ; 16 0000000000010000 (Mod2Mask) is set when num lock is on, ; 32 0000000000100000 (Mod3Mask) is set when scroll lock is on, ; 64 0000000001000000 (Mod4Mask) is set when win key is pressed, and ; 128 0000000010000000 (Mod5Mask) is set when alt-gr key is pressed. ; ; There may be more bits available and may vary depending on keyboard and ; keyboard settings. ; ; Parameter types: ; ; window_handle .. handle ; _x ............. int ; _y ............. int ; _x_root ........ int ; _y_root ........ int ; _state ......... uint ; _button ........ uint ; }
Button release callback
Generic callback function to call when button is released on widget. Callback function must have seven parameters as shown below. Each parameter is initialized as explained in XButtonEvent(3).
Supported by: all, including background.
Example:
_WIDGETCB_BUTTON_ callback cb_btn_release (window_handle, \ _x, _y, _x_root, _y_root, _state, _button) { ; ; _state is initialized as explained in Buttonpress action. ; ; Parameter types: ; ; window_handle .. handle ; _x ............. int ; _y ............. int ; _x_root ........ int ; _y_root ........ int ; _state ......... uint ; _button ........ uint ; }
Key press callback
Generic callback function to call when key is pressed on widget. Callback function must have eight parameters as shown below. Each parameter is initialized as explained in XKeyEvent(3). The last parameter, key, is printable character of which key was pressed.
Supported by: all, including background.
Example:
_WIDGETCB_KEY_ callback cb_key_press (window_handle, \ _x, _y, _x_root, _y_root, _state, _keycode, _key) { ; ; _state is initialized as explained in Buttonpress action. ; ; Parameter types: ; ; window_handle .. handle ; _x ............. int ; _y ............. int ; _x_root ........ int ; _y_root ........ int ; _state ......... uint ; _keycode ....... uint ; _key ........... string ; }
Key release callback
Generic callback function to call when key is released on widget. Callback function must have eight parameters as shown below. Each parameter is initialized as explained in XKeyEvent(3). The last parameter, key, is printable character of which key was released.
Supported by: all, including background.
Example:
_WIDGETCB_KEY_ callback cb_key_release (window_handle, \ _x, _y, _x_root, _y_root, _state, _keycode, _key) { ; ; _state is initialized as explained in Buttonpress action. ; ; Parameter types: ; ; window_handle .. handle ; _x ............. int ; _y ............. int ; _x_root ........ int ; _y_root ........ int ; _state ......... uint ; _keycode ....... uint ; _key ........... string ; }
Push callback
Pushbutton callback function to call when button is pushed. Callback function must have six parameters as shown below. Each parameter is initialized with current widget state.
Needed by: pushbutton_*
Example:
_WIDGETCB_PUSH_ callback cb_push (_widget_name, _widget_id, \ _min, _max, _steps, _step) { ; ; Parameter types: ; ; _widget_name ... string ; _widget_id ..... uint ; _min ........... uint ; _max ........... uint ; _steps ......... uint ; _step .......... uint ; }
Slide callback
Slideswitch callback function to call when switch is moved. Callback function must have six parameters as shown below. Each parameter is initialized with current widget state.
Needed by: slideswitch
Example:
_WIDGETCB_SLIDE_ callback cb_slide (_widget_name, _widget_id, \ _min, _length, _steps, _step) { ; ; Parameter types: ; ; _widget_name ... string ; _widget_id ..... uint ; _min ........... uint ; _length ........ uint ; _steps ......... uint ; _step .......... uint ; }
Turn callback
Turnswitch callback function to call when switch is turned. Callback function must have six parameters as shown below. Each parameter is initialized with current widget state.
Needed by: turnswitch
Example:
_WIDGETCB_TURN_ callback cb_turn (_widget_name, _widget_id, \ _min, _max, _steps, _step) { ; ; Parameter types: ; ; _widget_name ... string ; _widget_id ..... uint ; _min ........... uint ; _max ........... uint ; _steps ......... uint ; _step .......... uint ; }
Redraw callback
Generic callback function to call when widget redraw occurs. Callback function must have eleven parameters as shown below. Last parameter, pixel data, is a pointer to widget write-enabled internal graphics buffer. Each pixel in buffer is one uint32_t value splitted in four bytes for each color component and pixel alpha value. See struct pixel_rgba_8 in engine/pixel.h for details.
Supported by: all, including background.
Example:
_WIDGETCB_REDRAW_ callback cb_redraw (_widget_name, _widget_id, \ _x_pos, _y_pos, _width, _height, _step_now, _steps_min, _steps_max, \ _buffer_size, _pixel_buffer) { ; ; Parameter types: ; ; _widget_name ... string ; _widget_id ..... uint ; _x_pos ......... int ; _y_pos ......... int ; _width ......... uint ; _height ........ uint ; _step_now ...... uint ; _steps_min ..... uint ; _steps_max ..... uint ; _buffer_size ... usize ; _pixel_buffer .. pointer ; }
Custom widgets
Every moving widget is made of image frames. Moving means that widget has more than one state, or user can turn it or press it in a way that widget image changes. For that we need image frames, one frame per widget state or step. For example, lamp has two images, on and off. Same with leds, they can be on and off, nothing more. Turnswitch is different, it can have hundreds of states, depending how many steps there is between min and max angles. Provided turnswitch widget contains 360 frames, one per angle. If memory is a concern, less frames may be better. It does not really matter how many frames turnswitch or any other widget has, engine has capability to automatically display a frame that best suits to current angle of the widget. Lamps and leds of course needs two frames in order them to work.
As said, to create own widget, we need a bunch of images which forms the animation. A good starting point is to have every frame in its own image file, any empty borders cropped off and resized to final resolution, like 64x64 pixels. Any areas meant to be transparent must have alpha value of zero. There is tools available for packing widget frames together to create properly formatted widget pack useable by the engine. Tools and some scripts for the job is located in engine/tools directory. Further details and instructions can be found in this tutorial.
Widget file structure is defined as follows:
; Little endian widget identification tag, which is UTF-8 string saying ; I :heart: Korso ; Offset Type Data 0 uint32 0x9de22049 4 uint32 0x6f4b20a4 8 uint32 0x0a6f7372 All fields from here are in big-endian format. ; Pixel data offsets counting right after this structure, in bytes. ; Pixel data points to an array of 4 byte pixels, formatted as RGBA. ; ; Mask is mask_width * mask_height uint8 array, nonzero byte means widget is ; clickable there. ; 12 uint32 widget_offset 16 uint32 shadow_offset ; If shadow_offset is zero, there is no shadow 20 uint32 mask_offset ; Widget, shadow and mask dimensions in pixels. ; 24 uint32 widget_width 28 uint32 widget_height 32 uint32 shadow_width 36 uint32 shadow_height 40 uint32 mask_width 44 uint32 mask_height ; Widget frame count. ; 48 uint32 frames ; Shadow position relative to widget image, in pixels. ; 52 int32 shadow_x_pos 56 int32 shadow_y_pos 60 <pixel data>
Color chart
Color table supported by widget resource compiler. Color name can be used in place of RGB (Red, Green, Blue) value to get the color in preview column.
Name | RGB | Preview |
---|---|---|
aliceblue | #f0f8ff | |
alizarincrimson | #e32636 | |
antiquewhite | #faebd7 | |
antiquewhite1 | #ffefdb | |
antiquewhite2 | #eedfcc | |
antiquewhite3 | #cdc0b0 | |
antiquewhite4 | #8b8378 | |
aqua | #00ffff | |
aquamarine | #7fffd4 | |
aquamarine1 | #7fffd4 | |
aquamarine2 | #76eec6 | |
aquamarine3 | #66cdaa | |
aquamarine4 | #458b74 | |
aquamarinemedium | #66cdaa | |
aureolineyellow | #ffa824 | |
azure | #f0ffff | |
azure1 | #f0ffff | |
azure2 | #e0eeee | |
azure3 | #c1cdcd | |
azure4 | #838b8b | |
banana | #e3cf57 | |
beige | #a39480 | |
bisque | #ffe4c4 | |
bisque1 | #ffe4c4 | |
bisque2 | #eed5b7 | |
bisque3 | #cdb79e | |
bisque4 | #8b7d6b | |
black | #000000 | |
blanchedalmond | #ffebcd | |
blue | #0000ff | |
blue1 | #0000ff | |
blue2 | #0000ee | |
blue3 | #0000cd | |
blue4 | #00008b | |
bluelight | #add8e6 | |
bluemedium | #0000cd | |
blueviolet | #8a2be2 | |
brick | #9c661f | |
brown | #802a2a | |
brown1 | #ff4040 | |
brown2 | #ee3b3b | |
brown3 | #cd3333 | |
brown4 | #8b2323 | |
brownmadder | #db2929 | |
brownochre | #87421f | |
burlywood | #deb887 | |
burlywood1 | #ffd39b | |
burlywood2 | #eec591 | |
burlywood3 | #cdaa7d | |
burlywood4 | #8b7355 | |
burntsienna | #8a360f | |
burntumber | #8a3324 | |
cadet | #5f9ea0 | |
cadetblue | #7e7da0 | |
cadetblue1 | #98f5ff | |
cadetblue2 | #8ee5ee | |
cadetblue3 | #7ac5cd | |
cadetblue4 | #53868b | |
cadmiumlemon | #ffe303 | |
cadmiumorange | #ff6103 | |
cadmiumreddeep | #e3170d | |
cadmiumredlight | #ff030d | |
cadmiumyellow | #ff9912 | |
cadmiumyellowlight | #ffb00f | |
carrot | #ed9121 | |
cerulean | #05b8cc | |
chartreuse | #7fff00 | |
chartreuse1 | #7fff00 | |
chartreuse2 | #76ee00 | |
chartreuse3 | #66cd00 | |
chartreuse4 | #458b00 | |
chocolate | #d2691e | |
chocolate1 | #ff7f24 | |
chocolate2 | #ee7621 | |
chocolate3 | #cd661d | |
chocolate4 | #8b4513 | |
chromeoxidegreen | #668014 | |
cinnabargreen | #61b329 | |
cobalt | #3d59ab | |
cobaltgreen | #3d9140 | |
cobaltvioletdeep | #91219e | |
coldgray | #808a87 | |
coral | #ff7f50 | |
coral1 | #ff7256 | |
coral2 | #ee6a50 | |
coral3 | #cd5b45 | |
coral4 | #8b3e2f | |
corallight | #f08080 | |
cornflower | #6495ed | |
cornflowerblue | #6495ed | |
cornsilk | #fff8dc | |
cornsilk1 | #fff8dc | |
cornsilk2 | #eee8cd | |
cornsilk3 | #cdc8b1 | |
cornsilk4 | #8b8878 | |
cyan | #00ffff | |
cyan1 | #00ffff | |
cyan2 | #00eeee | |
cyan3 | #00cdcd | |
cyan4 | #008b8b | |
cyanwhite | #e0ffff | |
darkblue | #00008b | |
darkcyan | #008b8b | |
darkgoldenrod1 | #ffb90f | |
darkgoldenrod2 | #eead0e | |
darkgoldenrod3 | #cd950c | |
darkgoldenrod4 | #8b6508 | |
darkgray | #a9a9a9 | |
darkgreen | #005300 | |
darkkhaki | #bdb76b | |
darkmagenta | #8b008b | |
darkolivegreen | #4f4f2f | |
darkolivegreen1 | #caff70 | |
darkolivegreen2 | #bcee68 | |
darkolivegreen3 | #a2cd5a | |
darkolivegreen4 | #6e8b3d | |
darkorange | #ff8c00 | |
darkorange1 | #ff7f00 | |
darkorange2 | #ee7600 | |
darkorange3 | #cd6600 | |
darkorange4 | #8b4500 | |
darkorchid | #6a2566 | |
darkorchid1 | #bf3eff | |
darkorchid2 | #b23aee | |
darkorchid3 | #9a32cd | |
darkorchid4 | #68228b | |
darkred | #8b0000 | |
darksalmon | #e9967a | |
darkseagreen | #8fbc8f | |
darkseagreen1 | #c1ffc1 | |
darkseagreen2 | #b4eeb4 | |
darkseagreen3 | #9bcd9b | |
darkseagreen4 | #698b69 | |
darkslateblue | #333e63 | |
darkslategray | #3c404a | |
darkslategray1 | #97ffff | |
darkslategray2 | #8deeee | |
darkslategray3 | #79cdcd | |
darkslategray4 | #528b8b | |
darkturquoise | #1d6f75 | |
darkviolet | #9400d3 | |
deepochre | #733d1a | |
deeppink | #ff1493 | |
deeppink1 | #ff1493 | |
deeppink2 | #ee1289 | |
deeppink3 | #cd1076 | |
deeppink4 | #8b0a50 | |
deepskyblue | #00bfff | |
deepskyblue1 | #00bfff | |
deepskyblue2 | #00b2ee | |
deepskyblue3 | #009acd | |
deepskyblue4 | #00688b | |
dimgray | #696969 | |
dodgerblue | #1e90ff | |
dodgerblue1 | #1e90ff | |
dodgerblue2 | #1c86ee | |
dodgerblue3 | #1874cd | |
dodgerblue4 | #104e8b | |
eggshell | #fce6c9 | |
emeraldgreen | #00c957 | |
englishred | #d43d1a | |
firebrick | #b22222 | |
firebrick1 | #ff3030 | |
firebrick2 | #ee2c2c | |
firebrick3 | #cd2626 | |
firebrick4 | #8b1a1a | |
flesh | #ff7d40 | |
fleshochre | #ff5721 | |
floralwhite | #fffaf0 | |
forestgreen | #55c034 | |
fuchsia | #ff00ff | |
gainsboro | #dcdcdc | |
geraniumlake | #e31230 | |
ghostwhite | #f8f8ff | |
gold | #ffd700 | |
gold1 | #ffd700 | |
gold2 | #eec900 | |
gold3 | #cdad00 | |
gold4 | #8b7500 | |
goldenrod | #daa520 | |
goldenrod1 | #ffc125 | |
goldenrod2 | #eeb422 | |
goldenrod3 | #cd9b1d | |
goldenrod4 | #8b6914 | |
goldenroddark | #b8860b | |
goldenrodlight | #fafad2 | |
goldenrodpale | #eee8aa | |
goldochre | #c77826 | |
gray | #808080 | |
gray0 | #000000 | |
gray1 | #030303 | |
gray2 | #050505 | |
gray3 | #080808 | |
gray4 | #0a0a0a | |
gray5 | #0d0d0d | |
gray6 | #0f0f0f | |
gray7 | #121212 | |
gray8 | #141414 | |
gray9 | #171717 | |
gray10 | #1a1a1a | |
gray11 | #1c1c1c | |
gray12 | #1f1f1f | |
gray13 | #212121 | |
gray14 | #242424 | |
gray15 | #262626 | |
gray16 | #292929 | |
gray17 | #2b2b2b | |
gray18 | #2e2e2e | |
gray19 | #303030 | |
gray20 | #333333 | |
gray21 | #363636 | |
gray22 | #383838 | |
gray23 | #3b3b3b | |
gray24 | #3d3d3d | |
gray25 | #404040 | |
gray26 | #424242 | |
gray27 | #454545 | |
gray28 | #474747 | |
gray29 | #4a4a4a | |
gray30 | #4d4d4d | |
gray31 | #4f4f4f | |
gray32 | #525252 | |
gray33 | #545454 | |
gray34 | #575757 | |
gray35 | #595959 | |
gray36 | #5c5c5c | |
gray37 | #5e5e5e | |
gray38 | #616161 | |
gray39 | #636363 | |
gray40 | #666666 | |
gray41 | #696969 | |
gray42 | #6b6b6b | |
gray43 | #6e6e6e | |
gray44 | #707070 | |
gray45 | #737373 | |
gray46 | #757575 | |
gray47 | #787878 | |
gray48 | #7a7a7a | |
gray49 | #7d7d7d | |
gray50 | #7f7f7f | |
gray51 | #828282 | |
gray52 | #858585 | |
gray53 | #878787 | |
gray54 | #8a8a8a | |
gray55 | #8c8c8c | |
gray56 | #8f8f8f | |
gray57 | #919191 | |
gray58 | #949494 | |
gray59 | #969696 | |
gray60 | #999999 | |
gray61 | #9c9c9c | |
gray62 | #9e9e9e | |
gray63 | #a1a1a1 | |
gray64 | #a3a3a3 | |
gray65 | #a6a6a6 | |
gray66 | #a8a8a8 | |
gray67 | #ababab | |
gray68 | #adadad | |
gray69 | #b0b0b0 | |
gray70 | #b3b3b3 | |
gray71 | #b5b5b5 | |
gray72 | #b8b8b8 | |
gray73 | #bababa | |
gray74 | #bdbdbd | |
gray75 | #bfbfbf | |
gray76 | #c2c2c2 | |
gray77 | #c4c4c4 | |
gray78 | #c7c7c7 | |
gray79 | #c9c9c9 | |
gray80 | #cccccc | |
gray81 | #cfcfcf | |
gray82 | #d1d1d1 | |
gray83 | #d4d4d4 | |
gray84 | #d6d6d6 | |
gray85 | #d9d9d9 | |
gray86 | #dbdbdb | |
gray87 | #dedede | |
gray88 | #e0e0e0 | |
gray89 | #e3e3e3 | |
gray90 | #e5e5e5 | |
gray91 | #e8e8e8 | |
gray92 | #ebebeb | |
gray93 | #ededed | |
gray94 | #f0f0f0 | |
gray95 | #f2f2f2 | |
gray96 | #f5f5f5 | |
gray97 | #f7f7f7 | |
gray98 | #fafafa | |
gray99 | #fcfcfc | |
gray100 | #ffffff | |
green | #008000 | |
green1 | #00ff00 | |
green2 | #00ee00 | |
green3 | #00cd00 | |
green4 | #008b00 | |
greendark | #006400 | |
greenishumber | #ff3d0d | |
greenpale | #98fb98 | |
greenyellow | #adff2f | |
honeydew | #f0fff0 | |
honeydew1 | #f0fff0 | |
honeydew2 | #e0eee0 | |
honeydew3 | #c1cdc1 | |
honeydew4 | #838b83 | |
hotpink | #ff69b4 | |
hotpink1 | #ff6eb4 | |
hotpink2 | #ee6aa7 | |
hotpink3 | #cd6090 | |
hotpink4 | #8b3a62 | |
indianred | #b0171f | |
indianred1 | #ff6a6a | |
indianred2 | #ee6363 | |
indianred3 | #cd5555 | |
indianred4 | #8b3a3a | |
indigo | #2e0854 | |
ivory | #fffff0 | |
ivory1 | #fffff0 | |
ivory2 | #eeeee0 | |
ivory3 | #cdcdc1 | |
ivory4 | #8b8b83 | |
ivoryblack | #292421 | |
khaki | #f0e68c | |
khaki1 | #fff68f | |
khaki2 | #eee685 | |
khaki3 | #cdc673 | |
khaki4 | #8b864e | |
khakidark | #bdb76b | |
lampblack | #2e473b | |
lavender | #e6e6fa | |
lavenderblush | #fff0f5 | |
lavenderblush1 | #fff0f5 | |
lavenderblush2 | #eee0e5 | |
lavenderblush3 | #cdc1c5 | |
lavenderblush4 | #8b8386 | |
lawngreen | #7cfc00 | |
lemonchiffon | #fffacd | |
lemonchiffon1 | #fffacd | |
lemonchiffon2 | #eee9bf | |
lemonchiffon3 | #cdc9a5 | |
lemonchiffon4 | #8b8970 | |
lightbeige | #f5f5dc | |
lightblue | #abc5ff | |
lightblue1 | #bfefff | |
lightblue2 | #b2dfee | |
lightblue3 | #9ac0cd | |
lightblue4 | #68838b | |
lightcoral | #f08080 | |
lightcyan | #e0ffff | |
lightcyan1 | #e0ffff | |
lightcyan2 | #d1eeee | |
lightcyan3 | #b4cdcd | |
lightcyan4 | #7a8b8b | |
lightgoldenrod | #eedd82 | |
lightgoldenrod1 | #ffec8b | |
lightgoldenrod2 | #eedc82 | |
lightgoldenrod3 | #cdbe70 | |
lightgoldenrod4 | #8b814c | |
lightgoldenrodyellow | #fafad2 | |
lightgray | #d3d3d3 | |
lightgreen | #90ee90 | |
lightpink | #ffb6c1 | |
lightpink1 | #ffaeb9 | |
lightpink2 | #eea2ad | |
lightpink3 | #cd8c95 | |
lightpink4 | #8b5f65 | |
lightsalmon | #ffa07a | |
lightsalmon1 | #ffa07a | |
lightsalmon2 | #ee9572 | |
lightsalmon3 | #cd8162 | |
lightsalmon4 | #8b5742 | |
lightseagreen | #20b2aa | |
lightskyblue | #87cefa | |
lightskyblue1 | #b0e2ff | |
lightskyblue2 | #a4d3ee | |
lightskyblue3 | #8db6cd | |
lightskyblue4 | #607b8b | |
lightslateblue | #8470ff | |
lightslategray | #778899 | |
lightsteelblue | #3498ca | |
lightsteelblue1 | #cae1ff | |
lightsteelblue2 | #bcd2ee | |
lightsteelblue3 | #a2b5cd | |
lightsteelblue4 | #6e7b8b | |
lightyellow | #ffffe0 | |
lightyellow1 | #ffffe0 | |
lightyellow2 | #eeeed1 | |
lightyellow3 | #cdcdb4 | |
lightyellow4 | #8b8b7a | |
lime | #00ff00 | |
limegreen | #32cd32 | |
linen | #faf0e6 | |
madderlakedeep | #e32e30 | |
magenta | #ff00d3 | |
magenta1 | #ff00ff | |
magenta2 | #ee00ee | |
magenta3 | #cd00cd | |
magenta4 | #8b008b | |
manganeseblue | #03a89e | |
maroon | #800000 | |
maroon1 | #ff34b3 | |
maroon2 | #ee30a7 | |
maroon3 | #cd2990 | |
maroon4 | #8b1c62 | |
marsorange | #964514 | |
marsyellow | #e3701a | |
mediumaquamarine | #158776 | |
mediumblue | #3d62d0 | |
mediumforestgreen | #6b8e23 | |
mediumgoldenrod | #b8860b | |
mediumorchid | #ac4da6 | |
mediumorchid1 | #e066ff | |
mediumorchid2 | #d15fee | |
mediumorchid3 | #b452cd | |
mediumorchid4 | #7a378b | |
mediumpurple | #9370db | |
mediumpurple1 | #ab82ff | |
mediumpurple2 | #9f79ee | |
mediumpurple3 | #8968cd | |
mediumpurple4 | #5d478b | |
mediumseagreen | #1b8656 | |
mediumslateblue | #5f6d9a | |
mediumspringgreen | #3c8d23 | |
mediumturquoise | #3eacb5 | |
mediumvioletred | #c71585 | |
melon | #e3a869 | |
midnightblue | #191970 | |
mint | #bdfcc9 | |
mintcream | #f5fffa | |
mistyrose | #ffe4e1 | |
mistyrose1 | #ffe4e1 | |
mistyrose2 | #eed5d2 | |
mistyrose3 | #cdb7b5 | |
mistyrose4 | #8b7d7b | |
moccasin | #ffe4b5 | |
naplesyellowdeep | #ffa812 | |
navajowhite | #ffdead | |
navajowhite1 | #ffdead | |
navajowhite2 | #eecfa1 | |
navajowhite3 | #cdb38b | |
navajowhite4 | #8b795e | |
navy | #000080 | |
navyblue | #00008e | |
oldlace | #fdf5e6 | |
olive | #808000 | |
olivedrab | #6b8e23 | |
olivedrab1 | #c0ff3e | |
olivedrab2 | #b3ee3a | |
olivedrab3 | #9acd32 | |
olivedrab4 | #698b22 | |
olivegreendark | #556b2f | |
orange | #ff8a00 | |
orange1 | #ffa500 | |
orange2 | #ee9a00 | |
orange3 | #cd8500 | |
orange4 | #8b5a00 | |
orangered | #e2412a | |
orangered1 | #ff4500 | |
orangered2 | #ee4000 | |
orangered3 | #cd3700 | |
orangered4 | #8b2500 | |
orchid | #da6bd4 | |
orchid1 | #ff83fa | |
orchid2 | #ee7ae9 | |
orchid3 | #cd69c9 | |
orchid4 | #8b4789 | |
orchiddark | #9932cc | |
orchidmedium | #ba55d3 | |
palegoldenrod | #eee8aa | |
palegreen | #98ff98 | |
palegreen1 | #9aff9a | |
palegreen2 | #90ee90 | |
palegreen3 | #7ccd7c | |
palegreen4 | #548b54 | |
paleturquoise | #afeeee | |
paleturquoise1 | #bbffff | |
paleturquoise2 | #aeeeee | |
paleturquoise3 | #96cdcd | |
paleturquoise4 | #668b8b | |
palevioletred | #db7093 | |
palevioletred1 | #ff82ab | |
palevioletred2 | #ee799f | |
palevioletred3 | #cd6889 | |
palevioletred4 | #8b475d | |
papayawhip | #ffefd5 | |
peachpuff | #ffdab9 | |
peachpuff1 | #ffdab9 | |
peachpuff2 | #eecbad | |
peachpuff3 | #cdaf95 | |
peachpuff4 | #8b7765 | |
peacock | #33a1c9 | |
permanentgreen | #0ac92b | |
permanentredviolet | #db2645 | |
peru | #cd853f | |
pink | #ffc0cb | |
pink1 | #ffb5c5 | |
pink2 | #eea9b8 | |
pink3 | #cd919e | |
pink4 | #8b636c | |
pinklight | #ffb6c1 | |
plum | #dda0dd | |
plum1 | #ffbbff | |
plum2 | #eeaeee | |
plum3 | #cd96cd | |
plum4 | #8b668b | |
powderblue | #b0e0e6 | |
purple | #800080 | |
purple1 | #9b30ff | |
purple2 | #912cee | |
purple3 | #7d26cd | |
purple4 | #551a8b | |
purplemedium | #9370db | |
raspberry | #872657 | |
rawsienna | #c76114 | |
rawumber | #734a12 | |
red | #ff0000 | |
red1 | #ff0000 | |
red2 | #ee0000 | |
red3 | #cd0000 | |
red4 | #8b0000 | |
rosemadder | #e33638 | |
rosybrown | #bc8f8f | |
rosybrown1 | #ffc1c1 | |
rosybrown2 | #eeb4b4 | |
rosybrown3 | #cd9b9b | |
rosybrown4 | #8b6969 | |
royalblue | #4169e1 | |
royalblue1 | #4876ff | |
royalblue2 | #436eee | |
royalblue3 | #3a5fcd | |
royalblue4 | #27408b | |
saddlebrown | #8b4513 | |
salmon | #f86d68 | |
salmon1 | #ff8c69 | |
salmon2 | #ee8262 | |
salmon3 | #cd7054 | |
salmon4 | #8b4c39 | |
sandybrown | #b28f56 | |
sapgreen | #308014 | |
seagreen | #2e8b57 | |
seagreen1 | #54ff9f | |
seagreen2 | #4eee94 | |
seagreen3 | #43cd80 | |
seagreen4 | #2e8b57 | |
seagreendark | #8fbc8f | |
seagreenlight | #20b2aa | |
seagreenmedium | #3cb371 | |
seashell | #fff5ee | |
seashell1 | #fff5ee | |
seashell2 | #eee5de | |
seashell3 | #cdc5bf | |
seashell4 | #8b8682 | |
sepia | #5e2612 | |
sienna | #8e6b23 | |
sienna1 | #ff8247 | |
sienna2 | #ee7942 | |
sienna3 | #cd6839 | |
sienna4 | #8b4726 | |
silver | #c0c0c0 | |
skyblue | #87ceeb | |
skyblue1 | #87ceff | |
skyblue2 | #7ec0ee | |
skyblue3 | #6ca6cd | |
skyblue4 | #4a708b | |
skybluedeep | #00bfff | |
skybluelight | #87cefa | |
slateblue | #7586be | |
slateblue1 | #836fff | |
slateblue2 | #7a67ee | |
slateblue3 | #6959cd | |
slateblue4 | #473c8b | |
slatebluedark | #483d8b | |
slatebluelight | #8470ff | |
slatebluemedium | #7b68ee | |
slategray | #708090 | |
slategray1 | #c6e2ff | |
slategray2 | #b9d3ee | |
slategray3 | #9fb6cd | |
slategray4 | #6c7b8b | |
slategraydark | #2f4f4f | |
slategraylight | #778899 | |
snow | #fffafa | |
snow1 | #fffafa | |
snow2 | #eee9e9 | |
snow3 | #cdc9c9 | |
snow4 | #8b8989 | |
springgreen | #00ff7f | |
springgreen1 | #00ff7f | |
springgreen2 | #00ee76 | |
springgreen3 | #00cd66 | |
springgreen4 | #008b45 | |
springgreenmedium | #00fa9a | |
steelblue | #4682b4 | |
steelblue1 | #63b8ff | |
steelblue2 | #5cacee | |
steelblue3 | #4f94cd | |
steelblue4 | #36648b | |
steelbluelight | #b0c4de | |
tan | #d2b48c | |
tan1 | #ffa54f | |
tan2 | #ee9a49 | |
tan3 | #cd853f | |
tan4 | #8b5a2b | |
teal | #008080 | |
terreverte | #385e0f | |
thistle | #d8bfd8 | |
thistle1 | #ffe1ff | |
thistle2 | #eed2ee | |
thistle3 | #cdb5cd | |
thistle4 | #8b7b8b | |
titaniumwhite | #fcfff0 | |
tomato | #ff6347 | |
tomato1 | #ff6347 | |
tomato2 | #ee5c42 | |
tomato3 | #cd4f39 | |
tomato4 | #8b3626 | |
turquoise | #48d1cc | |
turquoise1 | #00f5ff | |
turquoise2 | #00e5ee | |
turquoise3 | #00c5cd | |
turquoise4 | #00868b | |
turquoiseblue | #00c78c | |
turquoisedark | #00ced1 | |
turquoisemedium | #48d1cc | |
turquoisepale | #afeeee | |
ultramarine | #120a8f | |
ultramarineviolet | #5c246e | |
vandykebrown | #5e2605 | |
venetianred | #d41a1f | |
violet | #9400d3 | |
violetdark | #9400d3 | |
violetred | #ff0094 | |
violetred1 | #ff3e96 | |
violetred2 | #ee3a8c | |
violetred3 | #cd3278 | |
violetred4 | #8b2252 | |
violetredmedium | #c71585 | |
violetredpale | #db7093 | |
viridianlight | #6eff70 | |
warmgray | #808069 | |
wheat | #f5deb3 | |
wheat1 | #ffe7ba | |
wheat2 | #eed8ae | |
wheat3 | #cdba96 | |
wheat4 | #8b7e66 | |
white | #ffffff | |
whitesmoke | #f5f5f5 | |
yellow | #ffff00 | |
yellow1 | #ffff00 | |
yellow2 | #eeee00 | |
yellow3 | #cdcd00 | |
yellow4 | #8b8b00 | |
yellowgreen | #9acd32 | |
yellowlight | #ffffe0 | |
yellowochre | #e38217 | |
zincwhite | #fdf8ff |
Copyright © 2024, Jani Salonen <salojan at goto10 piste co>. Piste is finnish word and means dot. All rights reserved.