Welcome to The Color Playground

Designed by Mavis Brauer

What do you want to do today?

Paint on Your Own Picture

Picture Study — sampling and paint
Sample landscape for color study
Adjustable viewer · nearby area light · 43-point source
Forty-three-point light array
Viewer
Flat colored reflector
Forty-three tiny light points are reflected point-by-point using exact ray/plane mapping for an adjustable viewer. Surface finish changes how tightly each reflected point is concentrated.
Matte Glossy
Surface finish: soft matte
Brush Width
Narrow Broad
Width 28
Light Strong

Get Started — Picture Mode

Picture Mode lets you explore color directly on an image you upload, such as a photograph or a picture of your own painting.

  1. Begin with the sample picture or Upload your own.
  2. Use Sample to choose a color from the picture.
  3. Open Color Picker to adjust that color using the Hue–Saturation field and Value slider.
  4. Click Paint Mode to choose Paint, Smear, Erase, or Glaze.
  5. Adjust the Brush Width, then click or drag on the picture.
  6. Use Undo and Redo as often as you like while experimenting.
  7. Value View changes the image to black and white so you can compare the value of a color.
  8. Click Reflection to see the color of a reflection based on the color of the light source and the color of the reflective surface.
  9. Practice offers suggestions for developing some of the skills available in Picture Mode.

Color Playground Help

Picture tool

This toolbar is now in place for picture mode. Tool connections will be added in the next tests.

Color Picker

Adjust a copy of the sampled picture color.

Sampled picture colorRGB —
Adjusted colorRGB —

This compact color picker starts with the sampled picture color. The sampler stays tied to the actual picture sample; the Color Picker lets you explore an adjusted version.

Formula

Practice with the Picture

These exercises are meant to be simple looking practice, not a test. Move the sampler around the landscape and watch how the Sample bars and Color Picker respond.

Exercise 1 — Light, dark, middle

Sample three places: a light sky color, a dark tree or shadow color, and a middle hill or mountain color. Notice how the RGB bars and paint-mix bars change from one sample to the next.

Exercise 2 — One color, three values

Find one color family in the picture, such as green hills, blue sky, or warm earth. Sample a light version, a darker version, and a middle version. Then open Color Picker and use Value to make small lighter/darker adjustments while comparing it with the original sample.

What to look for

Ask: Is the adjusted color only lighter or darker, or did it also become brighter, grayer, warmer, or cooler? This is the beginning of seeing color as a relationship, not just a single spot.

Test 138 adds Value View as a simple black-and-white picture toggle. No scoring or new sampling behavior has been added yet.

Source Color

Reflector Color

Light Model

Light source type
43 points
Viewer height
1.55
Move the viewer lower or higher while keeping the overhead area light and reflector plane unchanged.
Reflected color calculation
Reflection display

These modes change only how the reflected patch is drawn. Source color, reflector color, source position, and reflected-color calculations stay the same.

Reflected Color

This panel shows the shared source color, reflector color, aggregate reflected color, and a model check for matte-to-glossy and height behavior.

Source color #FFE935 The shared color of all 43 point sources.
Reflector color #11833C The color of the flat reflector surface.
Reflected color #4B8830 Aggregate reflected color from the 43-point source.
Reflection Venn preview
Source
Result
Reflector
Source color
Reflected result
Reflector color
The center overlap uses the current live reflection model.
Model check
Height intensity: 100%
Matte / filter result
HEX#000000
RGB0, 0, 0
Source light filtered by reflector color.
Current slider result
HEX#000000
RGB0, 0, 0
Blend set by the Matte–Glossy slider.
Glossy / highlight result
HEX#000000
RGB0, 0, 0
More of the source color seen as a highlight.

Use the Model check to compare the matte/filter result, the glossy/highlight result, and the current height-adjusted slider result. Copy HEX or RGB values for comparison in Explore.

Use Compare Venn Mixing and Reflective Filtering to open the familiar Venn-style light workspace with the current source, reflector, and reflected result loaded in.

Reflection Playground Help

The source is the small bead-like point of light. The reflector is the flat colored surface. The light grid on the reflector helps show the surface in perspective. Use the toolbar buttons to change the source and reflector colors.

The reflected light depends on the source color, reflector color, and surface finish. The Reflected Color panel gives a clear readout of what reaches the viewer. A matte surface spreads the reflection more broadly; a glossy surface makes it smaller, brighter, and more concentrated.

For this first foundation version, the viewer height can be adjusted in the Light Model panel. Dragging the source still changes the reflection position.

Mixing and Reflection Comparison

Same two colors, two different processes. The left side treats both colors as light or displayed-color inputs and combines them by the selected Light Model in Explore. The right side treats one color as source light and the other as the color of a reflective surface that filters the source light before it reaches the viewer.

Explore: color mixing

Both colors are treated as light or displayed-color inputs and combined by the selected Light Model in Explore. This does not model a reflective surface.

Explore overlap result#000000 · RGB 0, 0, 0

Reflection: light filtered by a surface

The Reflection side treats the reflector as a colored surface that filters the source light, with surface behavior varying on a continuum from matte to glossy.

Source light
→
Reflective surface
→
Light reaching viewer
Surface finish
Matte / filter result#000000
soft matte
Glossy / highlight result#000000
Current reflected result#000000
Key idea: These results are not expected to match because color mixing and reflective filtering are different physical processes.

Explore Light and Paint Mixing

Light models
Why are there 4 light models?
Color Playground includes several light models because artists and designers use light in different ways.
  • Additive light — pure colored light; overlaps move toward white.
  • RGB average — simple screen-style averaging of RGB values.
  • Linear light — mixes light more directly before display correction.
  • Split gamma — a visually useful blend for gradients and layering.
Paint models
Why are there 2 paint models?
The subtractive model is a simple learning diagram. Use Your Primaries is the more complex working model used for actual paint behavior and formulas.
  • Subtractive paint — teaching model; useful for seeing RYB relationships.
  • Use Your Primaries — working paint model; includes some subtraction but is not only subtraction.
Drag circles. Use Color Picker to adjust colors. Tap Sample to identify a color.
Paint model: Subtractive paint — teaching model shows red, yellow and blue moving toward black in the middle.
Reflection pair comparison
Source and reflector are the only active Explore circles. The Reflection Playground result is shown separately as a fixed reference swatch.
Source light
#000000
Reflector color
#000000
Reflection Playground result
#000000
Additive Light reference

Get Started

Color Playground lets you explore how different colors of light and paint overlap to produce new colors.

  1. Click Light or Paint to see how each set of primary colors interacts. Choose a mixing model from the menu. When you are done, click Light or Paint again to close the model menu.
  2. Click and hold on a circle to drag it around.
  3. Click Controls to change the size of the selected circle.
  4. Click Sample and a crosshairs symbol appears. Click and drag the crosshairs over an area whose color you want to investigate.
  5. Click Formula to see how much of each primary paint color is mixed together to approximate the sampled color.
  6. Click Color Picker to adjust the sampled color. Move around the rainbow screen to change the basic color, or hue, and saturation. Use the Value bar to make the color lighter or darker. Then click Apply to selected circle to see the effect on the selected circle.
  7. Click Got it to make this menu disappear.

On a computer, hover over toolbar icons for quick reminders.

Formula

Tap Sample, then drag the sampler over a color. Use the Comparison color checker to type or paste HEX/RGB and see its swatch.

Sampled color: RGB —

Suggested paint mix:
Sample a color to see a suggestion.

Approximate RYB mix chart
Red0
Yellow0
Blue0
Comparison color checker
RGB 164, 164, 0 · #A4A400
Type or paste HEX/RGB to see this comparison swatch.
Mode shown: Paint

Circle Size

Drag circles directly. Tap a circle to select it, then adjust its size.

Circle 1 is selected.

Value

Dark
Middle
Light
ColorRGB 82, 150, 184
ValueGray 139
Dark Light
Very dark1
Dark2
Middle3
Light4
Very light5
Three-shape value equalizer
Click a shape to select it, then use one Value slider to adjust that shape. Try to make all three shapes the same value.
Target value: MiddleTry to adjust all three shapes to match this target value.
Selected shape: Shape A
Value 50

Saturation

Sampled color
Original
Adjusted saturation
Medium
Same-value gray Full color
Dark Light
5-step saturation scale
Very gray
Muted
Medium
Strong
Full color

Hue

Choose a hue family from the circle, then adjust saturation and value to explore a full range of color.

Selected Hue

Selected hueRGB —

Adjusted Color

Adjusted colorRGB —

12-step hue circle

Saturation100%
MutedFull color
Value100%
DarkLight

Click any segment in the hue circle to choose the selected hue. The selected hue swatch shows that segment color, while the adjusted color responds to saturation and value.

Hue Practice

Look at the target color, then choose the matching hue family from the circle. Saturation and value may change, but the underlying hue family stays the same.

Hue Matching Practice

Target color
Your match

HSV Practice

Three-shape HSV practice
Click a shape below to select it. Then click a color in the big paint circles to set that shape's hue. Use the two sliders to adjust that shape's saturation and value.
Selected shape: Shape A
Value 62
Saturation 35

Color Picker

RGB 255, 0, 0

Use the color box for hue and saturation, then adjust Value.

Color Playground Help

Paper plate color-mixing exercise

Practice

These broader practice activities use real paint and simple mixing tasks to reinforce what you explored in Color Controls.

Paint Exercise 1: Mix the secondaries

Use red, yellow, and blue paint to mix the three secondary colors:

  • red + yellow = orange
  • yellow + blue = green
  • blue + red = violet

Paint Exercise 2: Mix the tertiaries

Mix colors between each primary and secondary: red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet.

Paint Exercise 3: Compare app overlaps to real paint

Look at an overlap color in Explore, then try to mix a similar color with real paint on a palette or paper plate.

Paint Exercise 4: Build a simple color wheel

Use a paper plate or palette. Place the primaries first, then mix and add secondaries and tertiaries around the circle.

These are starter exercises. They can become fuller step-by-step lessons later.