Description
Generate an HSL wheel with a random hue offset, explicit saturation/lightness, annular sector geometry and portable SVG; unlike a hue palette, the output defines a complete circular layout.
Procedural artwork expresses a visual idea through coordinates, repeated motifs, colors, or explicit placement constraints. A coordinate plan can be checked and reproduced before rendering, while physical material behavior and fabrication require separate information.
Generate an HSL wheel with a random hue offset, explicit saturation/lightness, annular sector geometry and portable SVG; unlike a hue palette, the output defines a complete circular layout.
When to use this tool
Use this generator to create reproducible color wheel cases from the supplied model or bank. Inspect the returned evidence before using cases in a test or exercise.
How to use the tool and how it works
- Supply sectorCount, saturationPercent, lightnessPercent, innerRadiusFraction in the field shapes below. Set seed when you need an explicit replay.
- Run the tool and correct any input error. For generated controls, distinguish a successful fixture containing an invalid case from failure to generate the fixture.
- Read hueOffsetDegrees, wedges, svg. Use the conventions below. Keep answer-bearing fields separate when presenting an exercise.
Draw one hue offset, divide a unit-radius wheel into equal sectors, and assign HSL hues with supplied saturation and lightness. Construct solid or annular wedge paths using innerRadiusFraction and return SVG and angle/color records.1
Delegated operations used for this result: color palette. Their calculation or parsing conventions apply to the corresponding result fields.2
| Input field | Meaning and units | Accepted input |
|---|---|---|
| sectorCount | Sector Count | Required. Safe integer; minimum 2; maximum 64. |
| saturationPercent | Saturation Percent | Required. Finite number; minimum 0; maximum 100. |
| lightnessPercent | Lightness Percent | Required. Finite number; minimum 0; maximum 100. |
| innerRadiusFraction | Inner Radius Fraction | Required. Finite number; minimum 0; strictly below 1. |
| seed | Optional numeric seed; takes precedence over context randomness. Without either, use the fixed tool.io default seed. | Optional. Safe integer. |
| Output field | Interpretation | Returned shape |
|---|---|---|
| hueOffsetDegrees | Hue Offset Degrees | Required. Finite number; minimum 0; strictly below 360. |
| wedges | Wedges | Required. Array of Object; no unknown keys.; minimum items 2; maximum items 64. |
| wedges[].startAngleDegrees | Start Angle Degrees | Required. Finite number; minimum 0; strictly below 360. |
| wedges[].endAngleDegrees | End Angle Degrees | Required. Finite number; maximum 360; strictly above 0. |
| wedges[].hueDegrees | Hue Degrees | Required. Finite number; minimum 0; strictly below 360. |
| wedges[].color | Color | Required. Text; minimum UTF-16 length 7; maximum UTF-16 length 7. |
| wedges[].path | Path | Required. Text; minimum UTF-16 length 1; maximum UTF-16 length 1024. |
| svg | Svg | Required. Text; minimum UTF-16 length 1; maximum UTF-16 length 65536. |
| randomness | Replay source and normalized 32-bit seed, or null seed for an advancing context source. | Required. Object; no unknown keys. |
| randomness.seed | Optional safe-integer replay seed; normalization and precedence are explained below. | Required. Safe integer. or Null. |
| randomness.source | Source | Required. Text; one of "context", "seed". |
An explicit safe-integer seed takes precedence over injected context randomness and is normalized to an unsigned 32-bit integer. With no seed and no context source, replay uses the fixed tool.io default seed. A context source must return finite values from zero inclusive to one exclusive; its advancing state must be retained separately. randomness records the source and normalized seed, or null for context. These generators are not cryptographic random sources.
{
"input": {
"sectorCount": 6,
"saturationPercent": 70,
"lightnessPercent": 55,
"innerRadiusFraction": 0.6,
"seed": 42
},
"output": {
"hueOffsetDegrees": 216.3973506912589,
"wedges": [
{
"startAngleDegrees": 0,
"endAngleDegrees": 60,
"hueDegrees": 216.3973506912589,
"color": "#3C7BDD",
"path": "M 6.123233995736766e-17 -1 A 1 1 0 0 1 0.8660254037844387 -0.49999999999999994 L 0.5196152422706632 -0.29999999999999993 A 0.6 0.6 0 0 0 3.6739403974420595e-17 -0.6 Z"
},
{
"startAngleDegrees": 60,
"endAngleDegrees": 120,
"hueDegrees": 276.3973506912589,
"color": "#9D3CDD",
"path": "M 0.8660254037844387 -0.49999999999999994 A 1 1 0 0 1 0.8660254037844387 0.49999999999999994 L 0.5196152422706632 0.29999999999999993 A 0.6 0.6 0 0 0 0.5196152422706632 -0.29999999999999993 Z"
},
{
"startAngleDegrees": 120,
"endAngleDegrees": 180,
"hueDegrees": 336.3973506912589,
"color": "#DD3C7B",
"path": "M 0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 6.123233995736766e-17 1 L 3.6739403974420595e-17 0.6 A 0.6 0.6 0 0 0 0.5196152422706632 0.29999999999999993 Z"
},
{
"startAngleDegrees": 180,
"endAngleDegrees": 240,
"hueDegrees": 36.39735069125891,
"color": "#DD9D3C",
"path": "M 6.123233995736766e-17 1 A 1 1 0 0 1 -0.8660254037844387 0.49999999999999994 L -0.5196152422706632 0.29999999999999993 A 0.6 0.6 0 0 0 3.6739403974420595e-17 0.6 Z"
},
{
"startAngleDegrees": 240,
"endAngleDegrees": 300,
"hueDegrees": 96.39735069125891,
"color": "#7BDD3C",
"path": "M -0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 -0.8660254037844386 -0.5000000000000001 L -0.5196152422706631 -0.30000000000000004 A 0.6 0.6 0 0 0 -0.5196152422706632 0.29999999999999993 Z"
},
{
"startAngleDegrees": 300,
"endAngleDegrees": 360,
"hueDegrees": 156.3973506912589,
"color": "#3CDD9D",
"path": "M -0.8660254037844386 -0.5000000000000001 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L -1.1021821192326178e-16 -0.6 A 0.6 0.6 0 0 0 -0.5196152422706631 -0.30000000000000004 Z"
}
],
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-1 -1 2 2\" role=\"img\" aria-label=\"Random HSL color wheel\"><path d=\"M 6.123233995736766e-17 -1 A 1 1 0 0 1 0.8660254037844387 -0.49999999999999994 L 0.5196152422706632 -0.29999999999999993 A 0.6 0.6 0 0 0 3.6739403974420595e-17 -0.6 Z\" fill=\"#3C7BDD\"/><path d=\"M 0.8660254037844387 -0.49999999999999994 A 1 1 0 0 1 0.8660254037844387 0.49999999999999994 L 0.5196152422706632 0.29999999999999993 A 0.6 0.6 0 0 0 0.5196152422706632 -0.29999999999999993 Z\" fill=\"#9D3CDD\"/><path d=\"M 0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 6.123233995736766e-17 1 L 3.6739403974420595e-17 0.6 A 0.6 0.6 0 0 0 0.5196152422706632 0.29999999999999993 Z\" fill=\"#DD3C7B\"/><path d=\"M 6.123233995736766e-17 1 A 1 1 0 0 1 -0.8660254037844387 0.49999999999999994 L -0.5196152422706632 0.29999999999999993 A 0.6 0.6 0 0 0 3.6739403974420595e-17 0.6 Z\" fill=\"#DD9D3C\"/><path d=\"M -0.8660254037844387 0.49999999999999994 A 1 1 0 0 1 -0.8660254037844386 -0.5000000000000001 L -0.5196152422706631 -0.30000000000000004 A 0.6 0.6 0 0 0 -0.5196152422706632 0.29999999999999993 Z\" fill=\"#7BDD3C\"/><path d=\"M -0.8660254037844386 -0.5000000000000001 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L -1.1021821192326178e-16 -0.6 A 0.6 0.6 0 0 0 -0.5196152422706631 -0.30000000000000004 Z\" fill=\"#3CDD9D\"/></svg>",
"randomness": {
"seed": 42,
"source": "seed"
}
}
}Limitations and assumptions
- Equal HSL hue steps do not guarantee equal perceived differences or accessible contrast. Geometry uses normalized coordinates and this is a color artwork rather than a physical spectral or printing model.
- A replay requires the same complete input and implementation. The stated sampling convention applies within its eligible space. A finite draw does not exhaust all possible outputs; repeats remain possible unless a distinct-selection rule is explicit.
- The field tables state structural bounds; cross-field constraints and bounded search or output budgets also apply. Unknown keys are rejected where the object contract disallows them. Input errors are distinct from null fields and deliberate invalid controls in a successful output.
Alternative or Complementary methods
For a supplied example, inspect the returned construction or delegated check directly. To evaluate a consumer, also test cases chosen for its own boundaries; a generated finite corpus does not establish exhaustive coverage.
References
Similar or alternative tools
- Random Categorical Color Palette Generator
Assign generated distinct hex colors to distinct supplied category labels under a caller OKLab distance threshold and finite attempt limit; assignments preserve category order and do not imply universal distinguishability.
- Random Color Vision Deficiency Palette Generator
Generate distinct sRGB hex colors separated by a caller threshold in OKLab after each existing full-severity protan/deutan/tritan simulation, with a finite attempt limit and no individual accessibility guarantee.