Scenic.Primitive.Style.Paint.Color (Scenic v0.10.3) View Source
Fill a primitive with a single color
The color paint is used as the data for the :fill
style.
Full Format
{:color, valid_color}
The full format is a tuple with two parameters. The first is the :color atom indicating that this is color paint data. The second is any valid color (see below).
Shortcut Format
valid_color
Because the color paint type is used so frequently, you can simply pass in any valid
color and the :fill
style will infer that it is to be used as paint.
Example:
graph
|> line({{0,0}, {100,100}}, fill: :blue)
Valid Colors
There are several ways to specify a color.
Named Colors
The simplest is to used a named color (see the table below). Named colors are simply referred to by an atom, which is their name. Named colors are opaque by default.
Named Colors with Alpha / Transparency
If you want a named color with a transparency, you can wrap it in a tuple and add a number between 0 and 255 (or 0x00 and 0xFF), to represent the alpha transparency.
{:blue, 128}
RGB Colors
An RGB color directly specifies the three color channels as a tuple. It is opaque by default.
{123, 231, 210}
{0xA1, 0xB1, 0xC1}
RGBA Colors
An RGBA color directly specifies the three color channels and the alpha/transparecy as a tuple.
{123, 231, 210, 128}
{0xA1, 0xB1, 0xC1, 0x12}
Named Colors
The set of named colors is adapted from the formal named colors from html.
Name | Value | Example |
---|---|---|
:alice_blue | {0xF0, 0xF8, 0xFF} | <div style="width=100%; background-color: AliceBlue;"> </div> |
:antique_white | {0xFA, 0xEB, 0xD7} | <div style="width=100%; background-color: AntiqueWhite;"> </div> |
:aqua | {0x00, 0xFF, 0xFF} | <div style="width=100%; background-color: Aqua;"> </div> |
:aquamarine | {0x7F, 0xFF, 0xD4} | <div style="width=100%; background-color: Aquamarine;"> </div> |
:azure | {0xF0, 0xFF, 0xFF} | <div style="width=100%; background-color: Azure;"> </div> |
:beige | {0xF5, 0xF5, 0xDC} | <div style="width=100%; background-color: Beige;"> </div> |
:bisque | {0xFF, 0xE4, 0xC4} | <div style="width=100%; background-color: Bisque;"> </div> |
:black | {0x00, 0x00, 0x00} | <div style="width=100%; background-color: Black;"> </div> |
:blanched_almond | {0xFF, 0xEB, 0xCD} | <div style="width=100%; background-color: BlanchedAlmond;"> </div> |
:blue | {0x00, 0x00, 0xFF} | <div style="width=100%; background-color: Blue;"> </div> |
:blue_violet | {0x8A, 0x2B, 0xE2} | <div style="width=100%; background-color: BlueViolet;"> </div> |
:brown | {0xA5, 0x2A, 0x2A} | <div style="width=100%; background-color: Brown;"> </div> |
:burly_wood | {0xDE, 0xB8, 0x87} | <div style="width=100%; background-color: BurlyWood;"> </div> |
:cadet_blue | {0x5F, 0x9E, 0xA0} | <div style="width=100%; background-color: CadetBlue;"> </div> |
:chartreuse | {0x7F, 0xFF, 0x00} | <div style="width=100%; background-color: Chartreuse;"> </div> |
:chocolate | {0xD2, 0x69, 0x1E} | <div style="width=100%; background-color: Chocolate;"> </div> |
:coral | {0xFF, 0x7F, 0x50} | <div style="width=100%; background-color: Coral;"> </div> |
:cornflower_blue | {0x64, 0x95, 0xED} | <div style="width=100%; background-color: CornflowerBlue;"> </div> |
:cornsilk | {0xFF, 0xF8, 0xDC} | <div style="width=100%; background-color: Cornsilk;"> </div> |
:crimson | {0xDC, 0x14, 0x3C} | <div style="width=100%; background-color: Crimson;"> </div> |
:cyan | {0x00, 0xFF, 0xFF} | <div style="width=100%; background-color: Cyan;"> </div> |
:dark_blue | {0x00, 0x00, 0x8B} | <div style="width=100%; background-color: DarkBlue;"> </div> |
:dark_cyan | {0x00, 0x8B, 0x8B} | <div style="width=100%; background-color: DarkCyan;"> </div> |
:dark_golden_rod | {0xB8, 0x86, 0x0B} | <div style="width=100%; background-color: DarkGoldenRod;"> </div> |
:dark_gray | {0xA9, 0xA9, 0xA9} | <div style="width=100%; background-color: DarkGray;"> </div> |
:dark_grey | {0xA9, 0xA9, 0xA9} | <div style="width=100%; background-color: DarkGrey;"> </div> |
:dark_green | {0x00, 0x64, 0x00} | <div style="width=100%; background-color: DarkGreen;"> </div> |
:dark_khaki | {0xBD, 0xB7, 0x6B} | <div style="width=100%; background-color: DarkKhaki;"> </div> |
:dark_magenta | {0x8B, 0x00, 0x8B} | <div style="width=100%; background-color: DarkMagenta;"> </div> |
:dark_olive_green | {0x55, 0x6B, 0x2F} | <div style="width=100%; background-color: DarkOliveGreen;"> </div> |
:dark_orange | {0xFF, 0x8C, 0x00} | <div style="width=100%; background-color: DarkOrange;"> </div> |
:dark_orchid | {0x99, 0x32, 0xCC} | <div style="width=100%; background-color: DarkOrchid;"> </div> |
:dark_red | {0x8B, 0x00, 0x00} | <div style="width=100%; background-color: DarkRed;"> </div> |
:dark_salmon | {0xE9, 0x96, 0x7A} | <div style="width=100%; background-color: DarkSalmon;"> </div> |
:dark_sea_green | {0x8F, 0xBC, 0x8F} | <div style="width=100%; background-color: DarkSeaGreen;"> </div> |
:dark_slate_blue | {0x48, 0x3D, 0x8B} | <div style="width=100%; background-color: DarkSlateBlue;"> </div> |
:dark_slate_gray | {0x2F, 0x4F, 0x4F} | <div style="width=100%; background-color: DarkSlateGray;"> </div> |
:dark_slate_grey | {0x2F, 0x4F, 0x4F} | <div style="width=100%; background-color: DarkSlateGrey;"> </div> |
:dark_turquoise | {0x00, 0xCE, 0xD1} | <div style="width=100%; background-color: DarkTurquoise;"> </div> |
:dark_violet | {0x94, 0x00, 0xD3} | <div style="width=100%; background-color: DarkViolet;"> </div> |
:deep_pink | {0xFF, 0x14, 0x93} | <div style="width=100%; background-color: DeepPink;"> </div> |
:deep_sky_blue | {0x00, 0xBF, 0xFF} | <div style="width=100%; background-color: DeepSkyBlue;"> </div> |
:dim_gray | {0x69, 0x69, 0x69} | <div style="width=100%; background-color: DimGray;"> </div> |
:dim_grey | {0x69, 0x69, 0x69} | <div style="width=100%; background-color: DimGrey;"> </div> |
:dodger_blue | {0x1E, 0x90, 0xFF} | <div style="width=100%; background-color: DodgerBlue;"> </div> |
:fire_brick | {0xB2, 0x22, 0x22} | <div style="width=100%; background-color: FireBrick;"> </div> |
:floral_white | {0xFF, 0xFA, 0xF0} | <div style="width=100%; background-color: FloralWhite;"> </div> |
:forest_green | {0x22, 0x8B, 0x22} | <div style="width=100%; background-color: ForestGreen;"> </div> |
:fuchsia | {0xFF, 0x00, 0xFF} | <div style="width=100%; background-color: Fuchsia;"> </div> |
:gainsboro | {0xDC, 0xDC, 0xDC} | <div style="width=100%; background-color: Gainsboro;"> </div> |
:ghost_white | {0xF8, 0xF8, 0xFF} | <div style="width=100%; background-color: GhostWhite;"> </div> |
:gold | {0xFF, 0xD7, 0x00} | <div style="width=100%; background-color: Gold;"> </div> |
:golden_rod | {0xDA, 0xA5, 0x20} | <div style="width=100%; background-color: GoldenRod;"> </div> |
:gray | {0x80, 0x80, 0x80} | <div style="width=100%; background-color: Gray;"> </div> |
:grey | {0x80, 0x80, 0x80} | <div style="width=100%; background-color: Grey;"> </div> |
:green | {0x00, 0x80, 0x00} | <div style="width=100%; background-color: Green;"> </div> |
:green_yellow | {0xAD, 0xFF, 0x2F} | <div style="width=100%; background-color: GreenYellow;"> </div> |
:honey_dew | {0xF0, 0xFF, 0xF0} | <div style="width=100%; background-color: HoneyDew;"> </div> |
:hot_pink | {0xFF, 0x69, 0xB4} | <div style="width=100%; background-color: HotPink;"> </div> |
:indian_red | {0xCD, 0x5C, 0x5C} | <div style="width=100%; background-color: IndianRed;"> </div> |
:indigo | {0x4B, 0x00, 0x82} | <div style="width=100%; background-color: Indigo;"> </div> |
:ivory | {0xFF, 0xFF, 0xF0} | <div style="width=100%; background-color: Ivory;"> </div> |
:khaki | {0xF0, 0xE6, 0x8C} | <div style="width=100%; background-color: Khaki;"> </div> |
:lavender | {0xE6, 0xE6, 0xFA} | <div style="width=100%; background-color: Lavender;"> </div> |
:lavender_blush | {0xFF, 0xF0, 0xF5} | <div style="width=100%; background-color: LavenderBlush;"> </div> |
:lawn_green | {0x7C, 0xFC, 0x00} | <div style="width=100%; background-color: LawnGreen;"> </div> |
:lemon_chiffon | {0xFF, 0xFA, 0xCD} | <div style="width=100%; background-color: LemonChiffon;"> </div> |
:light_blue | {0xAD, 0xD8, 0xE6} | <div style="width=100%; background-color: LightBlue;"> </div> |
:light_coral | {0xF0, 0x80, 0x80} | <div style="width=100%; background-color: LightCoral;"> </div> |
:light_cyan | {0xE0, 0xFF, 0xFF} | <div style="width=100%; background-color: LightCyan;"> </div> |
:light_golden_rod_yellow | {0xFA, 0xFA, 0xD2} | <div style="width=100%; background-color: LightGoldenRodYellow;"> </div> |
:light_gray | {0xD3, 0xD3, 0xD3} | <div style="width=100%; background-color: LightGray;"> </div> |
:light_grey | {0xD3, 0xD3, 0xD3} | <div style="width=100%; background-color: LightGrey;"> </div> |
:light_green | {0x90, 0xEE, 0x90} | <div style="width=100%; background-color: LightGreen;"> </div> |
:light_pink | {0xFF, 0xB6, 0xC1} | <div style="width=100%; background-color: LightPink;"> </div> |
:light_salmon | {0xFF, 0xA0, 0x7A} | <div style="width=100%; background-color: LightSalmon;"> </div> |
:light_sea_green | {0x20, 0xB2, 0xAA} | <div style="width=100%; background-color: LightSeaGreen;"> </div> |
:light_sky_blue | {0x87, 0xCE, 0xFA} | <div style="width=100%; background-color: LightSkyBlue;"> </div> |
:light_slate_gray | {0x77, 0x88, 0x99} | <div style="width=100%; background-color: LightSlateGray;"> </div> |
:light_slate_grey | {0x77, 0x88, 0x99} | <div style="width=100%; background-color: LightSlateGrey;"> </div> |
:light_steel_blue | {0xB0, 0xC4, 0xDE} | <div style="width=100%; background-color: LightSteelBlue;"> </div> |
:light_yellow | {0xFF, 0xFF, 0xE0} | <div style="width=100%; background-color: LightYellow;"> </div> |
:lime | {0x00, 0xFF, 0x00} | <div style="width=100%; background-color: Lime;"> </div> |
:lime_green | {0x32, 0xCD, 0x32} | <div style="width=100%; background-color: LimeGreen;"> </div> |
:linen | {0xFA, 0xF0, 0xE6} | <div style="width=100%; background-color: Linen;"> </div> |
:magenta | {0xFF, 0x00, 0xFF} | <div style="width=100%; background-color: Magenta;"> </div> |
:maroon | {0x80, 0x00, 0x00} | <div style="width=100%; background-color: Maroon;"> </div> |
:medium_aqua_marine | {0x66, 0xCD, 0xAA} | <div style="width=100%; background-color: MediumAquaMarine;"> </div> |
:medium_blue | {0x00, 0x00, 0xCD} | <div style="width=100%; background-color: MediumBlue;"> </div> |
:medium_orchid | {0xBA, 0x55, 0xD3} | <div style="width=100%; background-color: MediumOrchid;"> </div> |
:medium_purple | {0x93, 0x70, 0xDB} | <div style="width=100%; background-color: MediumPurple;"> </div> |
:medium_sea_green | {0x3C, 0xB3, 0x71} | <div style="width=100%; background-color: MediumSeaGreen;"> </div> |
:medium_slate_blue | {0x7B, 0x68, 0xEE} | <div style="width=100%; background-color: MediumSlateBlue;"> </div> |
:medium_spring_green | {0x00, 0xFA, 0x9A} | <div style="width=100%; background-color: MediumSpringGreen;"> </div> |
:medium_turquoise | {0x48, 0xD1, 0xCC} | <div style="width=100%; background-color: MediumTurquoise;"> </div> |
:medium_violet_red | {0xC7, 0x15, 0x85} | <div style="width=100%; background-color: MediumVioletRed;"> </div> |
:midnight_blue | {0x19, 0x19, 0x70} | <div style="width=100%; background-color: MidnightBlue;"> </div> |
:mint_cream | {0xF5, 0xFF, 0xFA} | <div style="width=100%; background-color: MintCream;"> </div> |
:misty_rose | {0xFF, 0xE4, 0xE1} | <div style="width=100%; background-color: MistyRose;"> </div> |
:moccasin | {0xFF, 0xE4, 0xB5} | <div style="width=100%; background-color: Moccasin;"> </div> |
:navajo_white | {0xFF, 0xDE, 0xAD} | <div style="width=100%; background-color: NavajoWhite;"> </div> |
:navy | {0x00, 0x00, 0x80} | <div style="width=100%; background-color: Navy;"> </div> |
:old_lace | {0xFD, 0xF5, 0xE6} | <div style="width=100%; background-color: OldLace;"> </div> |
:olive | {0x80, 0x80, 0x00} | <div style="width=100%; background-color: Olive;"> </div> |
:olive_drab | {0x6B, 0x8E, 0x23} | <div style="width=100%; background-color: OliveDrab;"> </div> |
:orange | {0xFF, 0xA5, 0x00} | <div style="width=100%; background-color: Orange;"> </div> |
:orange_red | {0xFF, 0x45, 0x00} | <div style="width=100%; background-color: OrangeRed;"> </div> |
:orchid | {0xDA, 0x70, 0xD6} | <div style="width=100%; background-color: Orchid;"> </div> |
:pale_golden_rod | {0xEE, 0xE8, 0xAA} | <div style="width=100%; background-color: PaleGoldenRod;"> </div> |
:pale_green | {0x98, 0xFB, 0x98} | <div style="width=100%; background-color: PaleGreen;"> </div> |
:pale_turquoise | {0xAF, 0xEE, 0xEE} | <div style="width=100%; background-color: PaleTurquoise;"> </div> |
:pale_violet_red | {0xDB, 0x70, 0x93} | <div style="width=100%; background-color: PaleVioletRed;"> </div> |
:papaya_whip | {0xFF, 0xEF, 0xD5} | <div style="width=100%; background-color: PapayaWhip;"> </div> |
:peach_puff | {0xFF, 0xDA, 0xB9} | <div style="width=100%; background-color: PeachPuff;"> </div> |
:peru | {0xCD, 0x85, 0x3F} | <div style="width=100%; background-color: Peru;"> </div> |
:pink | {0xFF, 0xC0, 0xCB} | <div style="width=100%; background-color: Pink;"> </div> |
:plum | {0xDD, 0xA0, 0xDD} | <div style="width=100%; background-color: Plum;"> </div> |
:powder_blue | {0xB0, 0xE0, 0xE6} | <div style="width=100%; background-color: PowderBlue;"> </div> |
:purple | {0x80, 0x00, 0x80} | <div style="width=100%; background-color: Purple;"> </div> |
:rebecca_purple | {0x66, 0x33, 0x99} | <div style="width=100%; background-color: RebeccaPurple;"> </div> |
:red | {0xFF, 0x00, 0x00} | <div style="width=100%; background-color: Red;"> </div> |
:rosy_brown | {0xBC, 0x8F, 0x8F} | <div style="width=100%; background-color: RosyBrown;"> </div> |
:royal_blue | {0x41, 0x69, 0xE1} | <div style="width=100%; background-color: RoyalBlue;"> </div> |
:saddle_brown | {0x8B, 0x45, 0x13} | <div style="width=100%; background-color: SaddleBrown;"> </div> |
:salmon | {0xFA, 0x80, 0x72} | <div style="width=100%; background-color: Salmon;"> </div> |
:sandy_brown | {0xF4, 0xA4, 0x60} | <div style="width=100%; background-color: SandyBrown;"> </div> |
:sea_green | {0x2E, 0x8B, 0x57} | <div style="width=100%; background-color: SeaGreen;"> </div> |
:sea_shell | {0xFF, 0xF5, 0xEE} | <div style="width=100%; background-color: SeaShell;"> </div> |
:sienna | {0xA0, 0x52, 0x2D} | <div style="width=100%; background-color: Sienna;"> </div> |
:silver | {0xC0, 0xC0, 0xC0} | <div style="width=100%; background-color: Silver;"> </div> |
:sky_blue | {0x87, 0xCE, 0xEB} | <div style="width=100%; background-color: SkyBlue;"> </div> |
:slate_blue | {0x6A, 0x5A, 0xCD} | <div style="width=100%; background-color: SlateBlue;"> </div> |
:slate_gray | {0x70, 0x80, 0x90} | <div style="width=100%; background-color: SlateGray;"> </div> |
:slate_grey | {0x70, 0x80, 0x90} | <div style="width=100%; background-color: SlateGrey;"> </div> |
:snow | {0xFF, 0xFA, 0xFA} | <div style="width=100%; background-color: Snow;"> </div> |
:spring_green | {0x00, 0xFF, 0x7F} | <div style="width=100%; background-color: SpringGreen;"> </div> |
:steel_blue | {0x46, 0x82, 0xB4} | <div style="width=100%; background-color: SteelBlue;"> </div> |
:tan | {0xD2, 0xB4, 0x8C} | <div style="width=100%; background-color: Tan;"> </div> |
:teal | {0x00, 0x80, 0x80} | <div style="width=100%; background-color: Teal;"> </div> |
:thistle | {0xD8, 0xBF, 0xD8} | <div style="width=100%; background-color: Thistle;"> </div> |
:tomato | {0xFF, 0x63, 0x47} | <div style="width=100%; background-color: Tomato;"> </div> |
:turquoise | {0x40, 0xE0, 0xD0} | <div style="width=100%; background-color: Turquoise;"> </div> |
:violet | {0xEE, 0x82, 0xEE} | <div style="width=100%; background-color: Violet;"> </div> |
:wheat | {0xF5, 0xDE, 0xB3} | <div style="width=100%; background-color: Wheat;"> </div> |
:white | {0xFF, 0xFF, 0xFF} | <div style="width=100%; background-color: White;"> </div> |
:white_smoke | {0xF5, 0xF5, 0xF5} | <div style="width=100%; background-color: WhiteSmoke;"> </div> |
:yellow | {0xFF, 0xFF, 0x00} | <div style="width=100%; background-color: Yellow;"> </div> |
:yellow_green | {0x9A, 0xCD, 0x32} | <div style="width=100%; background-color: YellowGreen;"> </div> |
Additional Named Colors
Name | Value | Example |
---|---|---|
:clear | {0x80, 0x80, 0x80, 0x00} | |
:transparent | {0x80, 0x80, 0x80, 0x00} |
Link to this section Summary
Functions
Convert a named color to RGB format
Convert a named or RGB color to RGBA format
Verify that a color is correctly described
Link to this section Types
Specs
Specs
Specs
Link to this section Functions
Specs
Convert a named color to RGB format
Specs
Convert a named or RGB color to RGBA format
Verify that a color is correctly described