Skip to content
kitto works
All tools

Oshi Color Palette Maker

Enter your favorite color (its hex code) and instantly generate tints, shades, a complementary color, analogous colors, and a triadic color scheme — each with ready-to-copy HEX, RGB, and HSL codes. Check the contrast ratio (WCAG) between text and background colors too. Nothing you enter is ever sent anywhere.

Works with or without a leading "#", any case, and 3-digit shorthand (e.g. #f0a).

The color you enter is processed entirely inside your browser and is never sent anywhere.

Lighter variations (tints)

    Darker variations (shades)

      Complementary color

        Analogous colors

          Triadic scheme

            Contrast check (readability for fan signs, etc.)

              How to use

              1. Enter your color's hex code, or pick one with the color picker.
              2. Review the automatically generated tints, shades, complementary color, analogous colors, and triadic scheme.
              3. Select "Copy" next to any color to copy its HEX code.

              How it works

              How the palette is generated

              Starting from the color you enter (as HEX), this tool generates:

              • Tints (lighter variations): the lightness is blended toward white in 4 steps (20%, 40%, 60%, 80%)
              • Shades (darker variations): the lightness is blended toward black in the same 4 steps
              • Complementary color: the color 180° across the color wheel
              • Analogous colors: the colors ±30° around the color wheel
              • Triadic scheme: the colors +120° and +240° around the wheel (three colors evenly spaced, forming a triangle)

              Color conversion uses standard HEX ⇄ RGB ⇄ HSL formulas.

              How the contrast ratio is calculated

              Whether a text color reads clearly against a background color is judged using the relative luminance and contrast ratio formulas defined by WCAG (Web Content Accessibility Guidelines) 2.1.

              1. Each color's RGB values are linearized, undoing the sRGB gamma curve.
              2. From the linearized values, relative luminance is computed as L = 0.2126×R + 0.7152×G + 0.0722×B (the weights differ by channel because the human eye perceives green as brightest and blue as dimmest).
              3. With L1 as the lighter color's luminance and L2 as the darker color's, the contrast ratio is (L1 + 0.05) / (L2 + 0.05).

              The ratio ranges from 1 (identical colors) to 21 (pure white against pure black). For normal-sized text, this tool labels the result using these thresholds:

              • AAA: 7.0 or higher (very readable)
              • AA: 4.5 or higher (readable)
              • Below that: below standard (may be hard to read)

              Use this as a guide when designing anything with text over a colored background — a hand-held fan sign at a concert, a social media profile, and so on.

              What this tool does not do

              This tool does not extract colors from an uploaded image (a dedicated tool is better suited for that). It also does not convert to print-oriented color spaces such as CMYK.

              FAQ

              Is the color I enter sent anywhere?

              No. All the palette calculations happen entirely inside your browser, and no data is ever sent to a server.

              What do the "AA" and "AAA" contrast labels mean?

              They're readability thresholds defined by the Web Content Accessibility Guidelines (WCAG) 2.1 for how well text stands out against its background. A higher number means easier to read: AA (4.5 or higher) is the common baseline, and AAA (7.0 or higher) is a stricter standard. Use them as a guide when choosing text and background colors for things like a fan sign or a logo.

              Can I extract a color from an image?

              Not with this tool — it's built specifically to generate a palette from a color code (HEX) you already have. If you want to pull a color out of an image, please use a dedicated image color-extraction tool instead.

              How do I use the colors this tool generates?

              Select the "Copy" button under any color to copy its HEX code to your clipboard, then paste it into your design tool, social media profile editor, or wherever you need it.

              Does it support 3-digit shorthand hex codes?

              Yes. Entering a 3-digit shorthand like "#f0a" is automatically expanded to its full 6-digit form (in this example, #ff00aa).

              Related tools