System Colors Cheatsheet - Online All CSS System Colors
View all CSS system colors (Canvas, ButtonFace, GrayText) as swatches. Click to copy. For forced‑colors adaptation.
UD5 Toolkit
Test, learn & copy regular expressions — live matching, searchable reference, and practical examples
., *, +, [], ()) to create flexible and powerful search patterns. Regex is supported in virtually all programming languages including JavaScript, Python, Java, PHP, and .NET.
*, +, ?, {n,m}) match as many characters as possible while still allowing the overall pattern to succeed. Lazy quantifiers (*?, +?, ??, {n,m}?) match as few characters as possible. For example, given the string "<div>hello</div>", the greedy pattern <.*> matches the entire string, while the lazy pattern <.*?> matches just "<div>".
\. Common metacharacters that need escaping include: ., *, +, ?, ^, $, {, }, (, ), [, ], |, /, and \. For example, to match a literal period, use \.. Inside a character class [], most metacharacters lose their special meaning and don't need escaping.
(?=…) and lookbehind (?<=…) are zero-width assertions that check if a pattern exists (or doesn't exist) ahead of or behind the current position, without consuming characters. Positive lookahead (?=pattern) asserts the pattern does follow. Negative lookahead (?!pattern) asserts it does not follow. Similarly, positive lookbehind (?<=pattern) checks behind, and negative lookbehind (? checks that a pattern does not precede. These are invaluable for complex validation without including the assertion in the match.
match() return an array of all matches, and matchAll() returns an iterator over all match details including capture groups. In JavaScript, the 'g' flag also affects the behavior of exec() by maintaining a lastIndex for iterative matching.
(pattern) store the matched content in memory, accessible via backreferences (\1, \2) or in results arrays. Non-capturing groups (?:pattern) group patterns for logical or repetition purposes without storing the match. Non-capturing groups are more memory-efficient and should be preferred when you don't need to reference the matched content later. They also keep result arrays cleaner by not adding unnecessary capture entries.
^ and $ match line starts/ends), s (dotall — . matches newline characters), u (unicode — enables full Unicode support), and y (sticky — matches only from lastIndex position). Flags vary slightly across programming languages and regex engines.
View all CSS system colors (Canvas, ButtonFace, GrayText) as swatches. Click to copy. For forced‑colors adaptation.
Check and beautify your TOML config files. Highlights errors and aligns tables and arrays. Safe local parsing.
Enter a hex color and get its relative luminance per WCAG definition. Understand why this matters for contrast.
Paste your CSS and strip all `!important` declarations in one click. See a list of affected rules. Local tool.
Check read/write/execute boxes and see the octal and symbolic chmod representation. Learn and compute file permissions.
Paste a linear‑gradient CSS value and see all the color stops listed as a palette. Copy individual hex codes. Quick reference.
Paste a Quartz cron expression (with seconds field) and translate it to standard Unix cron. For devops migrations.
Paste your full CSS and HTML; automatically identify and extract the styles needed for the visible part. Reduce render‑blocking resources.
Searchable table of well‑known TCP and UDP ports with their services. Check 80, 443, 3306, and many more.
Place colored points on a canvas and see a smooth gradient mesh interpolate between them. Experimental and beautiful. Download PNG.
Upload a photo and extract a smooth CSS gradient that represents its color mood. Copy the linear-gradient code.
Pick a scale (Major, Harmonic Minor, Dorian…) and a root note. Shows the notes and highlights them on piano & guitar fretboard.
Apply real-time CSS filters or canvas effects to a video and download the processed output. Experiment with video post-processing locally.
Upload a simple shape image and automatically trace its outline to a CSS clip‑path polygon. For creative web design. Local.
Enter water temperature and activity to get recommended wetsuit thickness (2/3mm to 6/5mm). Stay comfortable.
Select a meat or vegetable to see the best wood pairing for smoking. Flavor descriptions and intensity chart.
Take multiple evenly spaced screenshots from a video and combine them into a single filmstrip image. Local canvas.
Set up multiple @layers and use revert‑layer to fall back. See the computed style and cascade resolution live.
Search and filter all CSS properties that can be animated. See value types and example keyframes. Quick dev reference.
Search and browse a comprehensive table of SI units and common imperial conversions. For students and engineers.
Search by country or currency name to find its symbol and code. Quick static reference for international business.
Searchable grid of all named HTML character entities with previews. Click to copy &, <, © etc. For web devs.
Search a library of famous company brand colors with hex codes. Copy any color instantly. For designers and marketers.
Search by MIME or file extension to see the corresponding type. Helpful when configuring web servers. Static.
Reference diagrams for USB‑A, USB‑C, micro‑USB pinouts. See wire colors and signal descriptions. Hardware hacking helper.
Enter a regular expression and see a visual railroad diagram explaining the pattern. Learn and debug regex.
Click on any bone in the human skeleton to see its name and learn about it. Rotatable 3D‑like view. Study aid.
See the current UV index forecast or enter a value to learn protection needed (SPF, hat, shade). Educational.
Enter an English word to get a brief etymology (Latin, Greek, etc.) and root meaning. From curated static data.
Click through the rock cycle to see how each rock type transforms into another. Animated arrows and descriptions.