UD5 Toolkit
Hue Rotation Calculator - Online Shift CSS Filter Value
Enter original and target color to compute the exact CSS hue‑rotate(deg) filter needed. For precise icon and image tinting.
Perceived Brightness Calculator - Online Luminance Formula
Perceived Brightness Calculator
Calculate the perceived brightness of a color using the standard luminance formula. Ideal for accessibility and design decisions.
Color Input
#
Preset Colors:
Brightness Result
0.65
Scale: 0 (black) to 1 (white)
Light Text
Sample Text
White on this color
Contrast ratio: --
Dark Text
Sample Text
Black on this color
Contrast ratio: --
Recommendation: Dark text provides better readability.
How It Works
The perceived brightness (luminance) of a color is calculated using the standard relative luminance formula from WCAG 2.0, which accounts for human eye sensitivity to different colors:
Y = 0.2126 * R + 0.7152 * G + 0.0722 * BWhere R, G, B are the linearized sRGB values (0–1) after applying gamma expansion. This formula gives a value from 0 (black) to 1 (white), indicating how bright the color appears to the average human eye.
For accessibility, WCAG recommends a contrast ratio of at least 4.5:1 for normal text. Our tool also calculates the contrast ratio against white and black based on this luminance value.
Frequently Asked Questions
Perceived brightness is a measure of how bright a color appears to the human eye, based on the way our eyes perceive different wavelengths. It’s not simply the average of RGB values; green contributes the most, blue the least.
We use the standard sRGB linearization and the WCAG 2.0 relative luminance formula:
Y = 0.2126 * R + 0.7152 * G + 0.0722 * B. This is the basis for calculating contrast ratios for web accessibility.
The human eye is most sensitive to green light, which is why green contributes about 71.5% of the perceived brightness. Blue, on the other hand, contributes only about 7% because our eyes are less sensitive to it.
Use the luminance value to determine whether light or dark text will be readable. If the luminance is above 0.179, dark text usually yields better contrast; below that, light text is preferred. Our tool also shows the contrast ratio against black and white to help you meet WCAG standards.
No, HSL's "lightness" or "brightness" (value in HSV) is a simple mathematical transformation and does not account for human perception. Our formula provides a perceptually accurate brightness measure suitable for design decisions.
HWB Color Picker - Online Whiteness & Blackness Model
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Tea Leaf Expansion Calculator – Online Pot Size & Leaf Weight
Enter pot volume and tea type to find the right amount of dry leaf considering expansion. Avoid overflowing.
Color Blindness Simulator - Online Vision Deficiency Preview
Simulate how images and UI elements appear to users with various types of color blindness. Upload or paste image URL. Promote inclusive design.
Accessible Color Scale Builder - Online Generate Tints/Shades with Contrast
Pick a base color and generate a 10‑step scale where each step meets a specific contrast ratio against white or black. Export as CSS custom properties.
Color to Emotion Visualizer - Online Interactive Wheel
Click colors on an interactive wheel and see the common emotions and meanings associated with them. A design resource.
ARIA Attribute Validator - Online Check HTML Accessibility
Paste an HTML snippet and check for common ARIA mistakes: missing labels, invalid roles, and aria‑hidden misuse. Educate your team.
Text to Braille Converter - Online Grade 1 & 2 English
Convert English text to Braille (Grade 1 and simple Grade 2 contractions). Educational tool to understand Braille representation. Local only.
Color to Emotion Reference - Online Psychology Quick Guide
Click any color to see common emotional associations and cultural meanings. Quick design reference.
Pregnancy Due Date Calculator - Online LMP & Gestation Tool
Estimate the baby's due date based on last menstrual period (LMP) or conception date. Also shows current week and trimester. Educational only.
Auto White Balance - Online Fix Color Casts
Automatically restore natural colors to a photo by removing color casts. Gray world algorithm. One‑click fix. Canvas.
Volume Converter - Online Gallon Liter & Cup Unit Tool
Convert volume and capacity units: gallon (US/UK), liter, milliliter, cup, and fluid ounce. Handy for cooking and science. Works entirely offline.
Web HID Explorer - Online List & Read HID Devices
Request HID devices and list them. Read input reports and send output. For custom hardware and controllers.
Image Warm/Cool Filter - Online White Balance Adjuster
Shift the color temperature of your photo towards warm (orange) or cool (blue). Instant canvas filter. Download result.
Puppy Adult Weight Predictor – Online by Breed & Age
Enter current weight and age to estimate adult weight based on growth curves. For purebred and mixed.
Workday Calculator with Holidays - Online Add Business Days
Add N business days to a date, skipping weekends and optionally entering custom holidays. Regional presets.
Color Meaning by Culture - Online Cross‑Cultural Reference
See how a color is interpreted in different cultures (e.g., red in China vs. Western). Crucial for global web design. Static guide.
Online Sticker Maker - Add White Border & Shadow
Upload any image, add a thick white border and drop shadow, and turn it into a sticker. Download as transparent PNG.
Weighted Decision Coin Flip - Online Bias % Customizable
Flip a coin with adjustable bias (e.g., 70% heads). Used for random decision-making when you want to gently influence outcomes. History & stats shown.
Carabiner kN Rating Checker - Online Safety Converter
Convert carabiner strength from kN to kg/lbs and understand Major Axis vs Minor Axis markings. Quick educational reference for climbers.
HSTS Header Checker - Online Strict‑Transport‑Security
Fetch a site’s HSTS header and validate its syntax, max‑age, and subdomain flags. Ensure your site enforce HTTPS.
WCAG Safe Palette Builder - Online Accessible Color Sets
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Handwritten Digit Recognizer - Online Canvas & Guess
Draw a digit (0‑9) on the canvas and a simple neural net guess the number. Educational demo. No upload.
Text to HTML Safe Converter - Online Escape for Web
Convert plain text into HTML‑safe strings by escaping <, >, &, and quotes. Insert into code safely. Local copy.
Color Noise Generator - Online White Pink Brown Blue Violet
Play infinite sound loops of white, pink, brown, blue, and violet noise. Volume control. Help focus or mask tinnitus.
Reverse Each Word - Online Flip Within Sentence
Reverse every word in a sentence individually while keeping the word order. 'Hello World' becomes 'olleH dlroW'. Simple fun.
WebVTT Subtitle Validator - Online Check Syntax
Paste a WebVTT file and instantly check for syntax errors. Validate timestamps and cue formatting. Essential for video devs.
Dream Interpreter Dictionary - Online Symbol Meanings
Search common dream symbols and their traditional meanings. For entertainment and self-reflection. Static data.
Accessible Form Builder - Online Semantic HTML Generator
Create a fully accessible form by adding fields; the tool generates the proper labels, inputs, and ARIA attributes. Copy the clean HTML.
Text Reverser - Online Flip Letters & Words Backwards
Reverse entire text, flip letters, or reverse word order. Fun for puzzles and creative writing. Instant transformation without data leaving your browser.