Colour Selection Tools

Choose colours for your drawings with the Colour Picker, or create beautiful gradients with the Gradient Tool. Both tools work together to give you complete control over your artwork's colours.

Colour Picker

The Colour Picker provides a grid of 324 carefully selected colours, organised by hue and lightness for easy browsing.

  1. 1
    Open the Colour Picker
    Click any colour swatch in your drawing tool palette. The Colour Picker will open as a modal overlay with a grid of colours.
  2. 2
    Browse the colour grid
    The grid displays 18 columns (hues from 0° to 360° in 10° steps) and 18 rows (lightness from 20% to 90% in 10% steps). All colours use 65% saturation for consistency.
  3. 3
    Select a colour
    Click any colour swatch to select it. The colour information will display at the bottom, showing the hex code, RGB values, and HSL values.
  4. 4
    Confirm or cancel
    Click Select Colour to apply your choice, or click Cancel to close without changing. You can also press Esc to close.
324 Colours
Organised in an 18×18 grid by hue and lightness for intuitive colour selection.
Colour Information
View colour values in hex, RGB, and HSL formats. The colour name is also displayed.
Colour Formats:
Hex: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217°, 65%, 60%)
💡 Tip: Use your keyboard to navigate the Colour Picker! Press Tab to move between colours, Enter to select, and Esc to cancel.

Gradient Tool

Create smooth colour transitions with customisable start and end colours, direction, and number of steps.

  1. 1
    Open the Gradient Tool
    Click the gradient button in your drawing tool palette. The Gradient Tool panel will open.
  2. 2
    Choose start and end colours
    Click either the Start Colour or End Colour box. The Colour Picker will open, allowing you to select your desired colour. The gradient preview updates in real-time.
  3. 3
    Adjust gradient steps
    Use the steps slider to control how many colour transitions appear in your gradient. You can choose between 2 and 50 steps. More steps create smoother gradients.
  4. 4
    Select direction
    Choose from three directions: Horizontal (left to right), Vertical (top to bottom), or Diagonal (top-left to bottom-right).
  5. 5
    Apply the gradient
    Click Apply Gradient to create your gradient. The gradient is now ready to use with the Fill tool on shapes. Click Cancel to close without applying.

Gradient Directions

Horizontal
Vertical
Diagonal
ℹī¸ Important: Gradients can only be applied to shapes and objects, not to the canvas background. After creating a gradient, use the Fill tool to apply it to your shapes.
💡 Tip: Start with fewer steps (2-5) for bold, distinct colour bands, or use more steps (20-50) for smooth, subtle transitions.

Accessibility Features

Both colour tools are designed to be accessible to all users.

Keyboard Navigation
Navigate with Tab, Enter, and Escape keys. All interactive elements are keyboard accessible.
Screen Reader Support
ARIA labels and live regions ensure screen reader users receive all important information.
Focus Management
Clear focus indicators and logical tab order make navigation predictable and easy.
Touch-Friendly
All buttons meet the 44×44 pixel minimum size for comfortable touch interaction on mobile devices.

ī¸ Keyboard Shortcuts

Colour Picker
Tab Navigate between colours
Enter Select highlighted colour
Esc Close without selecting
Gradient Tool
Tab Navigate between controls
Enter Activate buttons
Esc Cancel and close

Touch Device Support

The colour tools include enhanced support for touch devices:

  • Haptic feedback: Feel subtle vibrations when selecting colours or adjusting gradient settings (on supported devices).
  • Larger touch targets: All buttons and swatches are sized for comfortable touch interaction.
  • Touch-optimised gestures: Swipe, tap, and drag work naturally throughout the interface.
  • Mobile-responsive layout: The interface adapts to smaller screens for optimal mobile use.
💡 Tip: On touch devices, tap and hold a colour swatch to see its colour information before selecting.

School Draw also includes an Eye Dropper tool that lets you sample any colour directly from your drawing — or from anywhere on screen in supported browsers. It is the fastest way to reuse a colour that already exists in your artwork.

Click the Eye Dropper button in the toolbar to get started.

Pick any colour from your drawing or — in Chrome and Edge — from anywhere on your screen, including other apps and images.

Learn about the Eye Dropper →