Skip to content

VeeLang Color Reference 🎨

Everything you can use today to color your drawings in VeeLang.

VeeLang Colors 🎨

Everything you need to know about making your drawings colorful!

Making Colors in VeeLang 🌈

Colors in VeeLang are super easy! Just remember to always put your colors in double quotes like this: "red" or "blue"

Important Rule: Colors must ALWAYS have double quotes around them!

  • ✅ Right: "red"
  • ❌ Wrong: red

Way #1: Use Color Names (The Easy Way!) 😊

VeeLang knows the names of LOTS of colors! Just use the name:

draw circle at 200,200 having color "tomato"
draw rectangle at 100,100 having fill "skyblue"
draw line from 50,50 to 150,150 having stroke "purple"

Why use names? They're easy to remember and spell!

Way #2: Mix Your Own Colors! 🎨

Sometimes you want a color that doesn't have a name. You can mix your own using RGB - that's Red, Green, and Blue!

draw circle at 200,200 having color "rgb(255, 136, 0)"

How RGB works:

  • First number = How much RED (0-255)
  • Second number = How much GREEN (0-255)
  • Third number = How much BLUE (0-255)

RGB Examples:

  • "rgb(255, 0, 0)" = Pure red (lots of red, no green, no blue)
  • "rgb(0, 255, 0)" = Pure green
  • "rgb(0, 0, 255)" = Pure blue
  • "rgb(255, 255, 0)" = Yellow (red + green = yellow!)
  • "rgb(128, 64, 192)" = Purple-ish (mix of colors)

Fun Fact: 255 is the biggest number you can use. Think of it like a color dial that goes from 0 (none) to 255 (maximum)!

Way #3: Secret Color Codes! 🔢

Colors also have secret codes called hex colors. They start with # and use letters and numbers:

draw circle at 200,200 having fill "#ff8800"

Common Hex Colors:

  • "#ff0000" = Red
  • "#00ff00" = Green
  • "#0000ff" = Blue
  • "#ffff00" = Yellow
  • "#ff00ff" = Bright pink (magenta)
  • "#ffffff" = White
  • "#000000" = Black

Shorter codes: You can make short codes too! "#f80" is the same as "#ff8800"

Way #4: The Color Wheel Way! 🎡

There's another way called HSL that works like a color wheel:

draw square at 250,250 having fill "hsl(30, 100%, 50%)"

What HSL means:

  • H = Hue (what color it is, like on a color wheel: 0-360)
  • S = Saturation (how colorful it is: 0-100%)
  • L = Lightness (how bright it is: 0-100%)

HSL Examples:

  • "hsl(0, 100%, 50%)" = Red
  • "hsl(120, 100%, 50%)" = Green
  • "hsl(240, 100%, 50%)" = Blue
  • "hsl(60, 100%, 75%)" = Light yellow

🌟 SUPER COOL FEATURE: Transparent Colors!

Want to make colors see-through like glass? You can make transparent colors!

Transparent RGB (RGBA):

draw circle at 200,200 having fill "rgba(255, 0, 0, 0.5)"

The last number (0.5) controls how see-through it is:

  • 1.0 = Completely solid (not see-through at all)
  • 0.5 = Half see-through
  • 0.2 = Very see-through
  • 0.0 = Completely invisible

Transparent HSL (HSLA):

draw rectangle at 150,150 having fill "hsla(120, 100%, 50%, 0.3)"

Cool Transparency Examples:

// Layered transparent circles
draw circle at 200,200 having fill "rgba(255, 0, 0, 0.6)", radius 60
draw circle at 230,220 having fill "rgba(0, 255, 0, 0.6)", radius 60  
draw circle at 170,220 having fill "rgba(0, 0, 255, 0.6)", radius 60

Why is transparency awesome?

  • Create layered effects where colors blend together
  • Make glass-like windows and bubbles
  • Create shadow effects
  • Build overlapping shapes that you can see through

All the Named Colors You Can Use! 🎯

Here are ALL the color names VeeLang understands (remember the double quotes!):

Basic Colors:

"red", "blue", "green", "yellow", "purple", "orange", "black", "white", "brown", "pink", "gray"

Light Colors:

"lightblue", "lightgreen", "lightpink", "lightyellow", "lightgray", "lightcoral"

Dark Colors:

"darkblue", "darkgreen", "darkred", "darkorange", "darkgray", "darkviolet"

Fun Colors:

"hotpink", "lime", "gold", "silver", "coral", "turquoise", "violet", "crimson", "indigo"

Food Colors:

"tomato", "orange", "chocolate", "wheat", "salmon", "peachpuff", "lemonchiffon", "papayawhip"

Nature Colors:

"forestgreen", "seagreen", "skyblue", "snow", "lavender", "mintcream", "ivory"

Complete List:

"aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "red", "rebeccapurple", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"

When to Use Each Type 🤔

Use Named Colors when:

  • You're just starting out
  • You want simple, recognizable colors
  • You're teaching someone else

Use RGB when:

  • You want to mix your own perfect color
  • You need transparency (RGBA)
  • You want precise control

Use Hex Colors when:

  • You're copying colors from other programs
  • You want to sound like a professional programmer!

Use HSL when:

  • You think about colors like a color wheel
  • You want to easily make lighter/darker versions

Fun Color Experiments! 🧪

Experiment 1: Transparency Layers

draw rectangle at 100,100 having width 100, length 100, fill "rgba(255, 0, 0, 0.7)"
draw rectangle at 150,150 having width 100, length 100, fill "rgba(0, 255, 0, 0.7)"  
draw rectangle at 125,125 having width 100, length 100, fill "rgba(0, 0, 255, 0.7)"

Experiment 2: Rainbow Gradients

draw circle at 100,200 having fill "hsl(0, 100%, 50%)", radius 30    // Red
draw circle at 150,200 having fill "hsl(60, 100%, 50%)", radius 30   // Yellow  
draw circle at 200,200 having fill "hsl(120, 100%, 50%)", radius 30  // Green
draw circle at 250,200 having fill "hsl(240, 100%, 50%)", radius 30  // Blue

Experiment 3: Same Color, Different Ways

// These are all the same orange color!
draw circle at 100,100 having fill "orange", radius 25
draw circle at 150,100 having fill "#ffa500", radius 25
draw circle at 200,100 having fill "rgb(255, 165, 0)", radius 25  
draw circle at 250,100 having fill "hsl(39, 100%, 50%)", radius 25

Pro Tips! 💡

  • ✅ Always Use Double Quotes
  • "red" ✅
  • 'red' ❌
  • red ❌
  • ✅ Start Simple
  • Begin with named colors like "red" and "blue"
  • Try RGB and transparency when you're comfortable
  • ✅ Experiment!
  • Try different transparency values (0.1, 0.5, 0.9)
  • Mix RGB numbers to discover new colors
  • Layer transparent shapes to create cool effects
  • ✅ Have Fun!
  • There's no wrong way to choose colors
  • Bright, bold colors often look great for kids' projects
  • Don't be afraid to try weird color combinations!

Remember: Colors are one of the most fun parts of programming! Experiment, play around, and create something that makes you smile! 🌈✨

All named CSS colors (with swatches)

These are the standard CSS color keywords the browser understands. You can use any of these names as color, fill, or stroke values in VeeLang (always in double quotes). The swatches below are collapsed to save space.

Show color swatches (click to expand)
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkgrey
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dimgrey
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
grey
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgray
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightslategrey
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rebeccapurple
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
slategrey
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

Tips

  • See the Pro Tips above for a quick summary on choosing colors and using quotes.