Getting Started and Quick Tools
Creativity Land provides a tabbed workspace for image editing and visual design. This guide explains how to navigate the interface and use the Quick Tools panel.
Application Requirements
Creativity Land requires a browser with JavaScript enabled.
The application relies on browser features including:
- HTML Canvas
- FileReader
- Image decoding
- Clipboard access
- CSS rendering
- Modern JavaScript modules
Some functionality may vary according to browser support.
Navigating the Interface
The main navigation provides access to:
| Tab | Purpose |
|---|---|
| Studio Preview | Edit photographs and images |
| Color Lab | Work with color harmonies and accessibility contrast |
| Convert | Perform basic image conversion |
| Palette | Extract colors from images |
| Presets | Browse ready-made color palettes |
| Analyze | Inspect image characteristics |
| Frames | Apply image overlays |
| Zoom | Magnify image details |
| Convert Images | Convert images with quality settings |
| Gradients | Generate CSS gradients |
| About | View application information |
The currently selected tool appears in the main workspace.
On smaller screens, the interface adjusts its layout and navigation behavior.
Quick Tools
The Quick Tools panel provides frequently used color operations without requiring you to switch tabs.
Quick Pick — Tints and Shades
Enter a HEX color to generate lighter and darker variations.
Example base color:
#3B82F6To use Quick Pick:
- Enter a valid HEX color.
- Click Apply.
- Review the generated swatches.
- Click a swatch to copy its color.
The original color is highlighted.
The generator creates five lighter variations and five darker variations around the base color.
Generate a Random Color
Click Random to select a randomly generated HEX color and display its variations.
Quick Harmony Generator
The Harmony tool generates related colors using a selected harmony system.
Usage
- Enter a base HEX color.
- Select a harmony type.
- Review the generated palette.
- Click any color swatch to copy its value.
Harmony Types
| Type | Description |
|---|---|
| Analogous | Neighboring colors |
| Complementary | Opposing colors |
| Split-Complementary | A base and two neighboring complementary colors |
| Triadic | Three evenly distributed hues |
| Tetradic | Four-color arrangement |
| Monochrome | Variations of one hue |
For low-saturation colors, the generator includes grayscale-oriented handling.
Quick Export
The Quick Tools panel also contains an Export selector.
| Option | Action |
|---|---|
| Canvas → PNG | Export the Studio canvas as PNG |
| Canvas → JPG | Export the Studio canvas as JPEG |
| Palette → JSON (clipboard) | Copy the current shared palette as JSON |
Example Palette JSON
[
"#3B82F6",
"#22D3EE",
"#10B981"
]Note: Canvas export uses the Studio canvas. It is not a universal exporter for whichever tab is currently selected.
The shared palette can be updated by multiple color-related tools.
Keyboard Shortcuts
The Quick Tools panel displays the following shortcuts:
| Key | Action |
|---|---|
| Z | Undo |
| Shift + Z | Redo |
| B | Brightness |
| C | Contrast |
| S | Saturation |
| H | Hue |
Shortcut behavior depends on the keyboard handlers implemented in the active editor. The labels alone do not guarantee that every shortcut operates globally.
Working with Color Swatches
Color swatches generally display HEX values and may also display RGB values.
Clicking a swatch copies its color.
In Color Lab, right-clicking a swatch can select that color as the new base color.
Clipboard access depends on browser permissions.
Tips
- Use HEX values to maintain consistent colors across tools.
- Generate several harmony types before selecting a palette.
- Use Color Lab's contrast checker before applying colors to interface text.
- Use Studio's dedicated Download button when exporting final edited photographs.
Updated 9 days ago