ForHosting KIT · Developer Utilities

Square color scheme generator

A square color scheme places four colors at equal ninety-degree intervals around the hue wheel.

● BetaFree · in your browser

Use it from WebAPIEmailTelegramApp soon

Enter one hex color and this generator preserves its saturation and lightness while producing the base hue and three balanced partners. The result includes reusable hex, RGB, and HSL values, so it can move directly into a design system, stylesheet, illustration brief, or brand exploration. The calculation is deterministic: the same valid input always returns the same ordered palette without randomness or network access.

How a square color harmony is constructed

A square harmony divides the 360-degree hue wheel into four equal quarters. The entered color occupies the first point, then the generator adds 90, 180, and 270 degrees to its hue. Saturation and lightness remain unchanged, which isolates hue as the only moving component and gives the palette a clear mathematical relationship. This differs from a rectangular tetradic scheme, where the gaps alternate rather than staying equal. Each returned swatch includes its exact hue offset, normalized HSL values, RGB channels, and a lowercase six-digit hex code. Hue rotation wraps cleanly after 360 degrees, so a base near the end of the wheel behaves exactly like any other color. For neutral colors such as gray, HSL saturation is zero and hue changes do not create visibly different colors; that is an expected property of the color model, not an error. The output order always begins with the normalized base color and proceeds clockwise through the three rotations.

Choosing and applying the four colors

Equal spacing creates variety, but good visual hierarchy still depends on how the four colors are assigned. Start by treating the base as the dominant brand, background, or illustration color. Use one rotated color for the primary accent, another for a secondary accent, and reserve the opposite hue for moments that need strong separation. Because all four swatches share saturation and lightness, they carry similar visual weight by default. In a finished interface, you may create lighter and darker variants after choosing roles so text, borders, fills, and interactive states do not compete equally. Always test foreground and background combinations for readable contrast; harmonic relationships do not guarantee accessibility. The generator provides a disciplined starting palette, not a rule that every color must cover the same amount of space. A practical distribution often gives one color most of the composition, supports it with one or two smaller areas, and uses the final color sparingly for emphasis.

Using deterministic output in design workflows

Deterministic output matters when a palette becomes part of an automated workflow. A stored base hex can regenerate the same four values during a build, in a design-token script, or when a customer changes a theme setting. The normalized input makes shorthand and mixed-case entries consistent, while the returned arrays make it easy to copy all four hex codes or inspect the structured color details. Since the algorithm uses fixed HSL conversions and fixed hue offsets, it does not rank colors by taste, infer a mood, or adjust individual swatches behind the scenes. That transparency makes the result easy to review and reproduce. Record the base color alongside the generated palette so future collaborators understand its origin. If you later tune saturation or lightness for a specific role, preserve the original square set as a reference and document the derived variants separately. API requests cost $0.002, while the browser version can be used for quick manual exploration without sending the color elsewhere.

What you can do with it

Build a four-color design system

Turn one approved brand color into four mathematically related starting tokens for interface and campaign work.

Plan an illustration palette

Generate evenly spaced hues that give characters, scenery, highlights, and accents distinct but connected roles.

Automate theme generation

Regenerate the same ordered hex, RGB, and HSL values whenever a user or project supplies a base color.

FAQ

What is a square color scheme?

It is a four-color harmony whose hues sit 90 degrees apart around the color wheel.

How is this different from a tetradic rectangle?

A square uses four equal 90-degree gaps. A rectangular tetradic palette uses alternating gaps, commonly 60 and 120 degrees.

Which hex formats are accepted?

Use three- or six-digit hexadecimal notation, with or without a leading hash, such as #f00 or e74c3c.

Why do gray inputs return matching colors?

Gray has zero HSL saturation, so rotating its hue does not change its visible RGB value.

Does a harmonious palette guarantee accessible contrast?

No. Hue harmony and text contrast are different concerns, so test each foreground and background pairing separately.

What does an API request cost?

Each API request costs $0.002. The browser tool is available for manual use without an API request.

For developers — API access

Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.

API endpoint

POSThttps://api.kit.forhosting.com/color/square-scheme

Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.

Call it from your stack

curl -X POST https://api.kit.forhosting.com/color/square-scheme \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hex":"#e74c3c"}'

const res = await fetch("https://api.kit.forhosting.com/color/square-scheme", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "hex": "#e74c3c"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/square-scheme",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "hex": "#e74c3c"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/square-scheme", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"hex":"#e74c3c"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"hex":"#e74c3c"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/square-scheme", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Example request

{
  "hex": "#e74c3c"
}

Example response

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.square_scheme",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.

Pricing

Per request$0.002

Published price — no tokens, no invented credits. A failed task is never charged.

Limits

hex_max_len 7

Errors

HTTP	Code	Meaning
`401`	`unauthorized`	Missing or invalid API key.
`402`	`insufficient_balance`	Your balance doesn't cover the task price.
`404`	`unknown_type`	That task type doesn't exist.
`429`	`rate_limited`	Too many requests. Use the webhook instead of polling.

Read the full KIT documentation →