Blog
Color theory, brand stories, and design guides.
What Is Pantone? The Universal Color Language
Understand the Pantone Matching System — how Pantone numbers work, PMS vs CMYK differences, Color of the Year tradition, and when to specify Pantone colors.
ก.พ. 20, 2026
What Is Metamerism? Why Colors Look Different Under Different Lights
Understand metamerism — why colors match under one light but look different under another. Learn illuminant, observer, and field-size metamerism and how to test for it.
ก.พ. 20, 2026
What Is Luminance? Brightness in Color Science
Understand luminance in color science — relative luminance for WCAG contrast, luminance vs brightness, and how luminance drives accessibility decisions.
ก.พ. 20, 2026
What Is Hue? The Most Fundamental Color Property
Learn what hue means in color theory — its position on the color wheel, hue angles in HSL/CSS, hue shift techniques, and the difference between hue and color.
ก.พ. 20, 2026
What Is Delta E? Measuring Color Difference
Learn about Delta E (ΔE) — the standard metric for measuring color difference. Compare CIE76 vs CIE2000 formulas, understand thresholds, and use in quality control.
ก.พ. 20, 2026
What Is Color Temperature? Kelvin Scale Explained
Understand color temperature and the Kelvin scale. Learn how warm and cool light affects design, photography white balance, and digital color choices.
ก.พ. 20, 2026
What Is a Color Space? sRGB, Adobe RGB, and Beyond
Understand color spaces from sRGB to Adobe RGB to ProPhoto RGB. Learn how color spaces work, when to use each, and how to choose for web vs print design.
ก.พ. 20, 2026
What Is Color Harmony? Rules for Pleasing Palettes
Learn what color harmony means — complementary, analogous, triadic, and tetradic schemes. Understand the rules behind visually pleasing color combinations.
ก.พ. 20, 2026
What Is a Color Gamut? Everything You Need to Know
Understand color gamut — the range of colors a device can display or print. Compare sRGB, Display P3, and Rec. 2020 gamuts for web and print design.
ก.พ. 20, 2026
What Is Color Depth? 8-bit, 10-bit, and HDR Explained
Learn about color depth — bits per channel, 8-bit vs 10-bit color, HDR displays, and how color depth affects banding, gradients, and image quality.
ก.พ. 20, 2026
What Is Color Blindness? Types, Causes, and Design Impact
Understand color blindness types (deuteranopia, protanopia, tritanopia), causes, prevalence statistics, and how to design inclusive interfaces for color blind users.
ก.พ. 20, 2026
What Is Chroma? Color Intensity Beyond Saturation
Understand chroma in color science — how it differs from saturation, its role in OKLCH and LCH color spaces, and why it matters for perceptually uniform palettes.
ก.พ. 20, 2026
What Is an Accent Color? Choosing and Using Accent Colors
Learn what accent colors are, how they function in the 60-30-10 rule, how to choose effective accents, and best practices for using accent colors in UI design.
ก.พ. 20, 2026
What Is a Neutral Color? Grays, Beiges, and Beyond
Understand neutral colors — pure grays, warm beiges, cool slates. Learn how neutral palettes work in web design, backgrounds, and pairing with accent colors.
ก.พ. 20, 2026
What Is a Hex Code? The Language of Digital Color
Learn what hex color codes are, how the hexadecimal system encodes RGB values, 3-digit shorthand, 8-digit alpha hex, and how to find hex codes for any color.
ก.พ. 20, 2026
What Color Is Vermilion? The Ancient Red-Orange
Vermilion is a vivid red-orange with hex code #E34234, historically made from cinnabar. Learn its history, modern uses, and color comparisons.
ก.พ. 20, 2026
What Color Is Teal? The Complete Guide
Teal is a cyan-green with hex code #008080. Discover how it differs from turquoise, cyan, and aqua — plus design applications for web, fashion, and interiors.
ก.พ. 20, 2026
What Color Is Taupe? The Sophisticated Neutral
Taupe is a warm grey-brown with hex code #483C32. Learn how it differs from greige and beige, its French origins, and how to use it in interior design and fashion.
ก.พ. 20, 2026
What Color Is Sage? The Trending Green
Sage is a muted grey-green with hex code #B2AC88. Learn how it differs from olive and mint, why it's trending in interiors and fashion, and sage hex codes.
ก.พ. 20, 2026
What Color Is Mauve? History and Modern Usage
Mauve is a pale purple-pink with hex code #E0B0FF. Discover its Victorian origins as the first synthetic dye and how to use it in modern design.
ก.พ. 20, 2026
What Color Is Ivory? Beyond Pure White
Ivory is a warm off-white with hex code #FFFFF0. Learn how it differs from cream, off-white, and eggshell — with wedding and web design applications.
ก.พ. 20, 2026
What Color Is Indigo? Between Blue and Violet
Indigo is a deep blue-violet with hex code #4B0082, sitting between blue and violet in the rainbow. Learn its dye history, denim connection, and design uses.
ก.พ. 20, 2026
What Color Is Coral? Hex Code and Color Breakdown
Coral is a warm pink-orange at #FF7F50. Learn how it differs from salmon and peach, why Pantone named it 2019's Color of the Year, and how to use it in design.
ก.พ. 20, 2026
What Color Is Chartreuse? The Most Confusing Color
Chartreuse confuses everyone. CSS defines it as #7FFF00 — a yellow-green — but many people insist it's red or pink. Here's the science, history, and design breakdown.
ก.พ. 20, 2026
What Color Is Burgundy? Hex Code and Color Breakdown
Burgundy is a deep red-purple with hex code #800020. Learn how it differs from maroon, wine, and crimson — with design and fashion applications.
ก.พ. 20, 2026
What Color Is Auburn? Hair, Design, and Hex Codes
Auburn is a rich reddish-brown with hex code #A52A2A. Learn how it compares to chestnut, mahogany, and copper — with design and hair color applications.
ก.พ. 20, 2026
Building a Color Picker Web Component from Scratch
Build an accessible color picker as a Web Component. Implement canvas rendering, hue sliders, alpha channels, and custom events with Shadow DOM.
ก.พ. 20, 2026
Web Color Performance: Gradients, Shadows, and Filters
Optimize web color performance. Learn how gradients, box-shadows, CSS filters, and backdrop-filter affect rendering performance and how to GPU-accelerate them.
ก.พ. 20, 2026
WCAG Color Contrast: A Developer's Complete Guide
Master WCAG 2.1 color contrast requirements. Learn AA and AAA levels, testing methods, automated tools, and how to fix contrast violations in your codebase.
ก.พ. 20, 2026
What Makes a Color 'Warm' or 'Cool'?
Warm and cool colors are a fundamental design concept — but the rules are more nuanced than they appear. Learn the color wheel science, relative temperature, and practical tips.
ก.พ. 20, 2026
Warm Colors vs Cool Colors: Psychology and Use Cases
Explore warm vs cool colors in design and psychology. Learn which hex codes are warm or cool, and how to combine color temperatures for visual impact.
ก.พ. 20, 2026
UPS Brown: The Unconventional Brand Color
Discover why UPS chose brown as its brand color, the origin story from Pullman railroad cars, what Pullman brown #644117 says about reliability, and the iconic 'What can brown do for you?' campaign.
ก.พ. 20, 2026
Understanding the Color Wheel: A Complete Guide
Learn about primary, secondary, and tertiary colors. Understand complementary, analogous, and triadic color relationships for better design.
ก.พ. 20, 2026
Understanding OKLCH: The Future of CSS Color
OKLCH is the modern CSS color format offering perceptual uniformity and wide gamut support. Learn how it works, why it beats HSL, and how to use it today.
ก.พ. 20, 2026
Triadic Color Schemes: Bold and Balanced Design
Learn how triadic color schemes use three equally spaced hues to create vibrant, balanced palettes. Includes examples, hex codes, and design tips for web and branding.
ก.พ. 20, 2026
Tint, Shade, and Tone: What's the Difference?
Understand the difference between tint, shade, and tone in color theory. Learn how adding white, black, or gray transforms any color with hex code examples.
ก.พ. 20, 2026
Tiffany Blue: How One Color Became a Trademarked Icon
Discover the history of Tiffany Blue, its Pantone 1837 designation, trademark protection, and how a single color became the world's most iconic luxury symbol.
ก.พ. 20, 2026
Tether Brand Colors: Stablecoin Green Trust
Understand Tether's green (#26A17B) brand color and how stablecoin branding uses green to communicate stability, trust, and dollar-peg reliability.
ก.พ. 20, 2026
Tech Startup Colors: What Your Brand Color Says About You
From Stripe's indigo to Robinhood's green, discover what tech startup brand colors reveal about company values, positioning, and the psychology behind each choice.
ก.พ. 20, 2026
Tailwind CSS v4 Color Changes: What Developers Need to Know
Understand Tailwind CSS v4 color changes including CSS-first configuration, OKLCH internals, new color utilities, and migration guide from v3.
ก.พ. 20, 2026
Tailwind Shade Generator: Custom Color Scales Made Easy
Generate custom Tailwind CSS color scales from any hex code. Learn how the 50-950 shade system works, how to configure tailwind.config.js, and build dark mode scales.
ก.พ. 20, 2026
Tailwind CSS Color System: How the Shades Are Generated
Deep dive into Tailwind CSS color system: 22 color families, 11 shade steps from 50–950, the generation algorithm, customization, and v4 CSS variable changes.
ก.พ. 20, 2026
Tailwind CSS Colors: Complete Shade System Guide
Master Tailwind CSS's color system: the default palette, 50-950 shade convention, custom colors in config, and the new CSS variables approach in Tailwind v4.
ก.พ. 20, 2026
SwiftUI Color System: Building Adaptive Color Palettes
Build adaptive color palettes in SwiftUI. Learn Color vs UIColor, asset catalog colors, dynamic dark mode colors, and accessibility color patterns.
ก.พ. 20, 2026
SVG Color Techniques: Fill, Stroke, and Gradients
Master SVG color techniques: fill and stroke attributes, linear and radial gradients, the currentColor keyword, and CSS-based SVG styling for modern web development.
ก.พ. 20, 2026
Stripe Brand Colors: Why Purple Means Payments
Discover Stripe's brand color story from blue to purple (#635BFF). Learn how gradient design and developer-focused branding shaped one of fintech's most distinctive palettes.
ก.พ. 20, 2026
Documenting Colors in Storybook: Patterns and Add-ons
Document color systems in Storybook with palette stories, accessibility checks, and auto-generated documentation. Best add-ons and patterns for color docs.
ก.พ. 20, 2026
Why Starbucks Chose Green: The Story Behind Starbucks Green
Explore why Starbucks chose green as its brand color, the evolution of its logo, and the exact hex code #006241 that defines one of the world's most iconic brands.
ก.พ. 20, 2026
sRGB vs Display P3: Wide Gamut Color Explained
sRGB vs Display P3: learn what color gamuts are, why P3 is 25% wider than sRGB, how to use CSS color(display-p3), and which devices support wide gamut.
ก.พ. 20, 2026
Spotify Green: The Color of Music Streaming
Discover the story of Spotify Green (#1DB954)—from its early iterations to its role in dark mode design and why it became the defining color of digital music streaming.
ก.พ. 20, 2026
Spot Colors vs Process Colors: Print Color Guide
Understand the difference between spot colors and CMYK process colors, when to use each, how they affect print costs, and how to prepare files correctly for each method.
ก.พ. 20, 2026
Split-Complementary Colors: The Designer's Secret
Split-complementary color schemes offer the visual contrast of complementary pairs with far less tension. Learn how to find them, use them, and why designers prefer them.
ก.พ. 20, 2026
Solana Brand Colors: The Gradient That Represents Speed
Explore Solana's signature purple-to-teal gradient, what it represents about speed and innovation, and the exact hex codes for the Solana brand palette.
ก.พ. 20, 2026
Social Media Color Palettes: Why Blue Dominates
Explore the color palettes of Facebook, Twitter/X, LinkedIn, Instagram, and TikTok—and understand the deep psychological and strategic reasons why blue dominates social media design.
ก.พ. 20, 2026
Slack Brand Colors: From Plaid to Four-Color Harmony
Trace Slack's color evolution from the original 11-color plaid logo to the simplified 4-color rebrand. Learn why color simplification strengthened the brand.
ก.พ. 20, 2026
Signage Color Combinations for Maximum Visibility
Learn the most visible signage color combinations, distance readability research, ADA sign requirements, LED considerations, and how materials and lighting affect sign color perception.
ก.พ. 20, 2026
shadcn/ui Color Customization: Theming with CSS Variables
Customize shadcn/ui colors with HSL CSS variables. Create custom themes, integrate dark mode, and sync with Tailwind CSS for consistent component styling.
ก.พ. 20, 2026
Semantic Color Systems: Naming Colors by Purpose, Not Hue
Build semantic color systems that name colors by purpose (success, warning, error) instead of hue. Learn token architecture and implementation in CSS and Tailwind.
ก.พ. 20, 2026
Screen Printing Colors: A Guide for Designers
Master screen printing color techniques including color separation, halftone screens, spot color inks, and design preparation for screen-printed materials.
ก.พ. 20, 2026
Scarlet vs Crimson: Two Shades of Deep Red
Compare scarlet (#FF2400) and crimson (#DC143C) — two deep red shades with different undertones. Learn hex codes, historical origins, and design applications.
ก.พ. 20, 2026
Scandinavian Design Colors: The Nordic Palette
Explore Scandinavian design colors: the Nordic palette of winter whites, nature greens, hygge warms, and muted earth tones. Includes hex codes for each color.
ก.พ. 20, 2026
XRP/Ripple Brand Colors: The Blue of Cross-Border Payments
Trace the XRP and Ripple brand color evolution from blue to black. Learn how enterprise blockchain branding communicates payment network reliability.
ก.พ. 20, 2026
RGB vs CMYK: When to Use Each Color Model
Learn the key differences between RGB and CMYK color models, when to use each for screen vs print design, and how to convert accurately between them.
ก.พ. 20, 2026
RGB Color Model: How Screens Display Color
Understand how the RGB color model works—red, green, and blue light mixing, the 0–255 range, the CSS rgb() function, and why screens can display 16.7 million colors.
ก.พ. 20, 2026
Responsive Color: Adapting Colors for Different Screens
Learn how colors shift across displays, color gamuts, and dark mode. Use CSS media queries and custom properties to build responsive color systems for any screen.
ก.พ. 20, 2026
Dynamic Color Theming in React: Beyond CSS Variables
Implement dynamic color theming in React using CSS variables, context providers, and Tailwind CSS. Build user-customizable themes with runtime color generation.
ก.พ. 20, 2026
Radix UI Colors: Perceptually Uniform Color Scales
Complete guide to Radix UI Colors: 12-step perceptually uniform scales, automatic dark mode, accessibility built-in, and integration with Tailwind and CSS frameworks.
ก.พ. 20, 2026
The Psychology of Yellow: Optimism, Warmth, and Caution
Why is yellow used for taxis, warning signs, and happy brands alike? Explore the psychology of yellow with hex codes and real-world design applications.
ก.พ. 20, 2026
The Psychology of Red: Passion, Urgency, and Power
Explore the psychology of red — why it triggers urgency, passion, and power in marketing, web design, and culture. Includes hex codes and real brand examples.
ก.พ. 20, 2026
The Psychology of Purple: Luxury, Creativity, and Mystery
Explore why purple signals luxury, creativity, and mystery in branding and design. From royal history to Twitch and Cadbury, learn how to use purple with confidence.
ก.พ. 20, 2026
The Psychology of Orange: Energy, Enthusiasm, and Fun
Orange is the color of enthusiasm, action, and approachability. Discover how brands from Amazon to Bitcoin use orange psychology to drive engagement and recognition.
ก.พ. 20, 2026
The Psychology of Green: Nature, Growth, and Balance
Explore the psychology of green in branding and design. From Starbucks to Spotify, learn how green signals nature, money, sustainability, and growth with real hex codes.
ก.พ. 20, 2026
The Psychology of Blue: Trust, Calm, and Authority
Discover why blue dominates corporate branding and social media. Explore the psychology of blue — trust, calm, authority — with hex codes and real-world brand examples.
ก.พ. 20, 2026
The Psychology of Black and White in Design
Discover the psychology of black and white in design — sophistication, purity, power, contrast. Learn how to use monochrome effectively with hex codes and accessibility guidance.
ก.พ. 20, 2026
Primary, Secondary, and Tertiary Colors Explained
Discover what primary, secondary, and tertiary colors are, how they are mixed, and how RYB and RGB models differ with practical hex code examples.
ก.พ. 20, 2026
Premier League Club Colors: History and Brand Identity
Explore Premier League club colors from Liverpool red to Chelsea blue. Learn why these colors persist, kit psychology, and the business of football color identity.
ก.พ. 20, 2026
Polkadot Brand Colors: Hot Pink in a Sea of Blue
Learn why Polkadot chose hot pink (#E6007A) to stand out in cryptocurrency's blue-dominated landscape, and how it reflects the multi-chain vision.
ก.พ. 20, 2026
Pink vs Magenta vs Rose: Understanding the Pink Family
Compare pink (#FFC0CB), magenta (#FF00FF), and rose (#FF007F). Understand the pink color family, hex code differences, and design applications for each.
ก.พ. 20, 2026
Color Correction in Photoshop: Curves, Levels, and HSL
Master Photoshop color correction with Curves, Levels, and HSL adjustments. Learn histogram reading, white balance, and professional color grading techniques.
ก.พ. 20, 2026
Perceptual Color Spaces: Lab, LCH, Oklab, OKLCH
Explore perceptually uniform color spaces — CIE Lab, LCH, Oklab, and OKLCH. Learn how each was designed, where it excels, and which to use for CSS and design work.
ก.พ. 20, 2026
How Paper Affects Color: Substrate and Print Quality
Understand how paper type, coating, and weight affect printed color. Learn the differences between coated, uncoated, and specialty papers for color accuracy.
ก.พ. 20, 2026
Pantone Matching System Explained: A Designer's Guide
Learn how the Pantone Matching System works, the difference between coated and uncoated books, spot vs process colors, and the limits of Pantone-to-hex conversion.
ก.พ. 20, 2026
The History of Pantone: How One Company Standardized Color
The complete history of Pantone: from Lawrence Herbert's 1963 vision to the Pantone Matching System, Color of the Year, and digital color standards used worldwide.
ก.พ. 20, 2026
Pantone Color of the Year: History and Impact
The complete history of Pantone Color of the Year from 2000 to 2025. Learn how colors are selected, their hex codes, and how they shape design, fashion, and product trends.
ก.พ. 20, 2026
Color Psychology in Packaging Design
Discover how color psychology drives packaging design decisions. Learn category color conventions, shelf impact strategies, sustainability signals, and premium cues that influence buying behavior.
ก.พ. 20, 2026
Opacity, Transparency, and Alpha Channels Explained
Learn the difference between opacity, transparency, and alpha channels. Covers CSS opacity vs rgba/hsla, layering techniques, and performance tips for overlays.
ก.พ. 20, 2026
OKLCH Color Picker: Why Designers Are Switching
Discover why OKLCH color pickers produce better results than HSL. Learn perceptual lightness, uniform chroma, and how to build palettes in OKLCH color space.
ก.พ. 20, 2026
Off-White Colors: Ivory, Cream, Eggshell, and Linen
Compare off-white shades — ivory (#FFFFF0), cream (#FFFDD0), eggshell (#F0EAD6), and linen (#FAF0E6). Learn hex codes and when to choose each for web backgrounds.
ก.พ. 20, 2026
Notion Brand Colors: Minimalism in Black and White
Understand Notion's monochrome brand strategy, the signature warm beige, and how minimalist color choices communicate productivity and creative freedom.
ก.พ. 20, 2026
Nike Brand Colors: Just Do It in Black and White
Explore Nike's iconic black-and-white branding, the Volt neon accent, product line color coding, and sub-brand palettes from Jordan to Air Max.
ก.พ. 20, 2026
Generating Colorful OG Images with Next.js and Satori
Generate dynamic Open Graph images with Next.js and Satori. Create color-aware OG templates with gradients, brand colors, and responsive designs.
ก.พ. 20, 2026
Netflix Red: How Color Drives Binge-Watching
Explore the psychology behind Netflix Red (#E50914), how its dark UI amplifies urgency, and why this color choice is inseparable from the binge-watching experience.
ก.พ. 20, 2026
NBA Team Colors: The Business of Basketball Branding
Analyze NBA team color strategies from the Lakers purple to Bulls red. Explore city edition experiments, color trends, and how colors drive merchandise sales.
ก.พ. 20, 2026
Navy Blue vs Dark Blue: What's the Difference?
Navy blue (#000080) is a specific, standardized dark blue. Learn how it differs from dark blue, its Royal Navy origins, hex codes, and design uses.
ก.พ. 20, 2026
Multi-Brand Color Architecture: One Codebase, Many Themes
Build multi-brand color architecture with CSS custom properties and design tokens. Support white-label theming from a single codebase with Tailwind integration.
ก.พ. 20, 2026
Most Popular Website Colors in 2026: Data Analysis
Analysis of the most common website colors in 2026: blue dominance in tech, dark mode backgrounds, text color shifts, and industry-specific color patterns.
ก.พ. 20, 2026
Monochromatic Color Palettes: Elegant Simplicity
Learn how to build monochromatic color palettes using tints and shades. Practical design examples, UI patterns, and step-by-step guidance for elegant results.
ก.พ. 20, 2026
10 Color Palettes for Minimalist Web Design
10 curated color palettes for minimalist web design with full hex codes. Monochrome, earth tones, Nordic, Japanese minimalism, and more with usage guidance.
ก.พ. 20, 2026
Mediterranean Colors: Sun, Sea, and Terracotta
Discover Mediterranean color palettes with hex codes—Greek blue, Italian terracotta, Spanish tiles, Moroccan jewel tones, and coastal design inspiration.
ก.พ. 20, 2026
Material Design Color System: Google's Approach
Explore Google's Material Design color system: tonal palettes, primary/secondary roles, Dynamic Color (Material You), and real hex code implementation examples.
ก.พ. 20, 2026
Difference Between Magenta and Fuchsia
Magenta and fuchsia share the same hex code #FF00FF in CSS, yet they are treated as distinct colors. Here's the full technical and historical breakdown.
ก.พ. 20, 2026
Luxury Brand Colors: Black, Gold, and the Art of Exclusivity
Explore how Chanel, Louis Vuitton, Hermès, and Tiffany use color to signal exclusivity. Learn the psychology of black, gold, and signature luxury brand colors.
ก.พ. 20, 2026
Lilac vs Lavender vs Mauve: Purple's Subtle Siblings
Compare lilac (#C8A2C8), lavender (#E6E6FA), and mauve (#E0B0FF). Learn the subtle differences between these purple-adjacent colors with hex codes and use cases.
ก.พ. 20, 2026
Korean Obangsaek (오방색): The Five Cardinal Colors
Discover Korean Obangsaek (오방색), the five cardinal colors rooted in yin-yang philosophy. Learn their meanings, directions, and use in Korean design today.
ก.พ. 20, 2026
JavaScript Color Manipulation: Libraries and Techniques
Master JavaScript color manipulation with chroma.js, culori, and tinycolor2. Parse, transform, and generate colors programmatically for web applications.
ก.พ. 20, 2026
Japanese Traditional Colors (日本の伝統色): A Complete Guide
Explore Japanese traditional colors (日本の伝統色) with hex codes, cultural meanings, and seasonal associations. From ai-iro indigo to sakura pink.
ก.พ. 20, 2026
Is White a Color? Light, Pigment, and Perception
Is white a color or the absence of color? Explore the science of light, the pigment world, and how white is used in design — from #FFFFFF to warm whites.
ก.พ. 20, 2026
Is Black a Color? The Science and Design Answer
Is black a color? Physics says no — it's the absence of light. Art says yes — it's a pigment. Design says absolutely yes. Here's the full breakdown.
ก.พ. 20, 2026
Indian Color Symbolism: Holi and Beyond
Explore Indian color symbolism from Holi festival to wedding reds and sacred saffron. Discover hex codes and cultural meanings behind India's vibrant palette.
ก.พ. 20, 2026
IKEA Brand Colors: Swedish Blue and Yellow
Discover how IKEA's blue (#003399) and yellow (#FFDA1A) brand colors connect to Swedish heritage, build trust, and create a distinctive retail experience.
ก.พ. 20, 2026
Hue, Saturation, and Lightness: The HSL Color Model
Master the HSL color model: learn what hue, saturation, and lightness mean, how HSL works in CSS, and how it compares to HSV for better color decisions.
ก.พ. 20, 2026
HSL vs HSV: Which Color Model Should You Use?
Understand the difference between HSL and HSV color models, when each is appropriate for web development or color pickers, and how both compare to CSS color functions.
ก.พ. 20, 2026
How to Check Color Contrast for WCAG Compliance
Learn how to check color contrast ratios for WCAG AA and AAA compliance. Step-by-step guide with practical hex code examples and common pitfalls to avoid.
ก.พ. 20, 2026
How Many Colors Can the Human Eye See?
The human eye can distinguish roughly 10 million colors. Learn how cone cells work, what tetrachromacy is, and why screens can only display a fraction of what we see.
ก.พ. 20, 2026
Designing for High Contrast Mode: Windows, macOS, and Web
Design for high contrast mode across Windows, macOS, and web. Learn forced-colors CSS, system color keywords, testing strategies, and common pitfalls to avoid.
ก.พ. 20, 2026
Understanding Hex Color Codes: The Complete Guide
Master hex color codes from the ground up. Learn what #RRGGBB means, how to read any hex value, shorthand notation, alpha transparency, and how to convert between formats.
ก.พ. 20, 2026
Gray vs Grey: Spelling, Shades, and Color Codes
Is it gray or grey? Learn the American vs British spelling difference, CSS named color rules, 50 shades of gray hex codes, and warm vs cool gray choices.
ก.พ. 20, 2026
Gradient Design Trends: From Flat to Dimensional
Explore gradient design trends from flat design's backlash to mesh gradients and glassmorphism. CSS techniques, color theory, and tools for modern gradient work.
ก.พ. 20, 2026
Google's Four Colors: The Meaning Behind the Primary Palette
Explore the story behind Google's four-color logo: Ruth Kedar's design, why primary colors were chosen, the rule-breaking green, and how Material Design evolved the palette.
ก.พ. 20, 2026
Gold vs Yellow: Why Gold Feels Premium
Understand why gold (#FFD700) feels premium while yellow (#FFFF00) feels cheerful. Learn to create gold effects in CSS, and when to use each in branding.
ก.พ. 20, 2026
How to Generate a Complete Color Palette from One Color
Learn how to build a complete, harmonious color palette from a single starting color. Covers complementary, analogous, triadic, and shade generation with hex examples.
ก.พ. 20, 2026
Color Gamut Mapping: Converting Between Color Spaces
Understand color gamut mapping: what out-of-gamut colors are, how clipping vs perceptual compression works, and how CSS handles gamut mapping in 2026.
ก.พ. 20, 2026
The Future of Web Color: HDR, Spectral, and Beyond
Explore the future of web color — HDR displays, spectral rendering, CSS Color Level 5, wide gamut adoption, and what designers should prepare for next.
ก.พ. 20, 2026
Foil Stamping and Metallic Colors in Print Design
Learn about foil stamping techniques, metallic ink options, gold and silver foil choices, and design considerations for premium print materials.
ก.พ. 20, 2026
Fintech Brand Colors: Building Trust Through Blue
Why fintech companies choose blue: Stripe's #635BFF, PayPal's #003087, Robinhood's green exception, and the psychology of color in financial services design.
ก.พ. 20, 2026
How to Find the Perfect Complementary Color
Learn how to find complementary colors using the color wheel, mathematical formulas, and the palette generator tool. Includes design patterns and hex code examples.
ก.พ. 20, 2026
Figma Color Variables: A Complete Guide for Design Systems
Master Figma color variables for design systems. Learn to create, organize, and sync color tokens between Figma and code for consistent theming.
ก.พ. 20, 2026
Figma Color Styles vs Variables: When to Use Each
Compare Figma color styles and variables. Learn key differences, migration paths, and best practices for teams managing design system color tokens.
ก.พ. 20, 2026
Figma Auto-Layout Components with Color Tokens
Build Figma auto-layout components with color token architecture. Learn variable binding, responsive tokens, theme variants, and developer handoff.
ก.พ. 20, 2026
Fast Food Color Psychology: Red and Yellow Everywhere
Why do McDonald's, KFC, and Burger King all use red and yellow? Discover the science of fast food color psychology and how it drives appetite and sales.
ก.พ. 20, 2026
The Story of Facebook Blue: Zuckerberg's Color Choice
Discover why Facebook chose blue as its signature color, the exact hex (#1877F2), and how Mark Zuckerberg's color blindness shaped one of the world's most recognized brands.
ก.พ. 20, 2026
Ethereum's Evolution: From Frontier to Purple
Explore Ethereum's visual identity evolution: the diamond/octahedron logo origins, why purple-blue tones define ETH, and the brand colors #627EEA and #3C3C3D behind crypto's second-largest network.
ก.พ. 20, 2026
Emerald vs Jade vs Forest Green: Green Comparison Guide
Compare emerald (#50C878), jade (#00A86B), and forest green (#228B22). Learn the visual and hex code differences between these popular green shades.
ก.พ. 20, 2026
Dynamic Color Generation: Algorithms for Design Systems
Learn the algorithms behind shade generation, contrast-aware color selection, dark mode palette derivation, and theme generation from a single brand color for design systems.
ก.พ. 20, 2026
Dogecoin Brand Colors: Meme Gold and Community Color
Explore Dogecoin's Shiba Inu gold (#C2A633), meme culture color origins, Comic Sans branding, and how community art shaped the most playful crypto brand.
ก.พ. 20, 2026
Discord Brand Colors: Blurple and the Gaming Aesthetic
Explore Discord's iconic Blurple (#5865F2), the 2021 rebrand controversy, and how gaming culture shaped one of tech's most distinctive color identities.
ก.พ. 20, 2026
Difference Between Violet and Purple
Violet is a spectral color (~380-450nm); purple is a non-spectral mix of red and blue. Learn their hex codes, CSS definitions, and how to tell them apart.
ก.พ. 20, 2026
Design Tokens for Color: From Figma to Code
Implement color design tokens from Figma to production code using Style Dictionary. Learn token naming, transformation, and multi-platform output.
ก.พ. 20, 2026
DeFi Protocol Colors: Uniswap, Aave, Compound, and More
Analyze DeFi protocol brand colors from Uniswap pink to Aave purple to Compound green. Understand how color differentiation works in decentralized finance.
ก.พ. 20, 2026
Implementing Dark Mode: A Complete Developer Guide
Learn how to implement dark mode using CSS custom properties, prefers-color-scheme, JavaScript toggles, and proper color adaptation strategies for any web project.
ก.พ. 20, 2026
Dark Mode Colors: Best Practices for Light-to-Dark
Learn dark mode color best practices: reduce lightness instead of inverting, surface hierarchy, readable text, and tools for testing light and dark simultaneously.
ก.พ. 20, 2026
Difference Between Cyan and Turquoise
Cyan (#00FFFF) and turquoise (#40E0D0) look similar but differ fundamentally in color model position, saturation, and use case. Here's the full breakdown.
ก.พ. 20, 2026
CSS Relative Color Syntax: Transform Any Color Dynamically
Master CSS relative color syntax to transform colors dynamically. Adjust hue, saturation, lightness, and alpha channels directly in your stylesheets.
ก.พ. 20, 2026
CSS light-dark() Function: Native Theme Switching
Use CSS light-dark() for native theme switching. Replace JavaScript toggles and media queries with a single CSS function for light and dark mode colors.
ก.พ. 20, 2026
CSS Gradient Guide: Linear, Radial, and Conic Gradients
Master CSS gradients: linear, radial, and conic syntax with practical examples, color stops, angles, and tips for using a gradient generator tool.
ก.พ. 20, 2026
CSS Custom Properties for Dynamic Color Systems
Learn how to build maintainable, themeable color systems with CSS custom properties. Covers variables, light/dark modes, and runtime JS color changes.
ก.พ. 20, 2026
CSS color-mix(): Blend Colors Natively in the Browser
Learn CSS color-mix() to blend colors natively in the browser. Master syntax, color spaces, practical use cases, and create dynamic palettes without JavaScript.
ก.พ. 20, 2026
CSS Color Functions: rgb(), hsl(), oklch() Compared
Compare every CSS color function — rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch(), and color-mix(). Learn which to use, when, and what browser support looks like.
ก.พ. 20, 2026
Cryptocurrency Brand Colors: A Complete Guide
Explore the brand colors of Bitcoin, Ethereum, Solana, BNB, and 20+ cryptocurrencies. Learn the hex codes, design choices, and color patterns across the crypto industry.
ก.พ. 20, 2026
Crypto Exchange Brand Colors: Binance, Coinbase, Kraken
Compare crypto exchange brand colors from Binance gold to Coinbase blue to Kraken purple. Analyze what exchange color choices communicate about trust and trading.
ก.พ. 20, 2026
Complementary Colors: The Art of Contrast
Discover how complementary colors work, how to find them on the color wheel, and how to use opposite hues to create striking, high-contrast designs.
ก.พ. 20, 2026
Understanding Color Value and Contrast in Design
Learn how color value—lightness and darkness—controls visual hierarchy, readability, and accessibility. Includes the squint test, WCAG implications, and practical examples.
ก.พ. 20, 2026
Color Trends in Web Design 2026
Discover 2026's biggest web design color trends: dark mode evolution, gradient renaissance, muted earth tones, neon accents, and glassmorphism palette examples.
ก.พ. 20, 2026
Color Theming in React: CSS Variables and Context
Build scalable color theming in React using CSS custom properties and Context API. Covers theme architecture, Tailwind CSS themes, and multi-brand strategies.
ก.พ. 20, 2026
Color Temperature in Design: From Warm to Cool
Understand color temperature in design — warm reds and oranges vs. cool blues and greens — and how to use each to create the right emotional response.
ก.พ. 20, 2026
Building a Color System for Your Design System
Build a systematic color architecture for your design system with naming conventions, shade generation, semantic tokens, and implementation patterns.
ก.พ. 20, 2026
Color Separation Explained: Preparing Files for Print
Understand CMYK color separation, spot color plates, trapping, and registration marks. Prepare print-ready files with correct color separations.
ก.พ. 20, 2026
The 60-30-10 Rule: Color Proportion in Design
Master the 60-30-10 color rule for design. Learn how dominant, secondary, and accent colors work together, with real examples, hex codes, and tips for breaking the rule effectively.
ก.พ. 20, 2026
Color Proofing: Ensuring Accurate Print Colors
Learn soft proofing, hard proofing, and press proof techniques to ensure accurate print color reproduction from screen to final output.
ก.พ. 20, 2026
How to Extract a Color Palette from an Image
Learn how to extract color palettes from images using quantization algorithms, online tools, and programmatic approaches. Build palettes from photographs.
ก.พ. 20, 2026
Color Naming Conventions in CSS and Design Systems
Explore CSS named colors, semantic naming with custom properties, Tailwind-style scale naming, and best practices for managing color names in team design systems.
ก.พ. 20, 2026
Color Mixing Theory: Additive vs Subtractive
Additive and subtractive color mixing explain why screen colors (RGB) and print colors (CMYK) behave so differently. Learn the science and how it applies to design.
ก.พ. 20, 2026
Color Management Workflow: From Screen to Print
Master color management from monitor calibration to print proofing. Learn how ICC profiles, soft proofing, and a consistent workflow keep colors accurate from screen to print.
ก.พ. 20, 2026
Color Interpolation in CSS: Why OKLCH Wins
CSS color interpolation determines how gradients and color-mix() blend colors. Learn why OKLCH produces vivid, perceptually even results while RGB and HSL fail.
ก.พ. 20, 2026
Color in Web Animation: GSAP, Framer Motion, and CSS
Master color animation in CSS transitions, GSAP, and Framer Motion. Learn OKLCH interpolation, keyframe techniques, and performance optimization.
ก.พ. 20, 2026
Color in Onboarding Flows: First Impressions and Guidance
Design effective onboarding experiences with strategic color use. Learn welcome screen palettes, progress indicators, tooltips, and celebration moments.
ก.พ. 20, 2026
Color in Navigation Design: Active States and Wayfinding
Use color effectively in navigation design. Learn active state contrast, breadcrumb colors, sidebar highlighting, and mobile navigation color patterns.
ก.พ. 20, 2026
Color in Mobile App Design: Platform Guidelines
Master color in mobile app design. iOS Human Interface Guidelines, Material Design 3 color system, adaptive light/dark mode, Dynamic Island, and system color best practices.
ก.พ. 20, 2026
Color in Micro-Interactions: Hover, Focus, Active States
Master color usage in micro-interactions — hover previews, focus guidance, active feedback. Build consistent state colors across UI components.
ก.พ. 20, 2026
Color in Marketing: How Brands Use Color to Sell
How do brands use color to drive sales and loyalty? From 80% brand recognition gains to CTA A/B tests, learn the ROI of strategic color in marketing.
ก.พ. 20, 2026
Color in Generative Art: Algorithms for Beautiful Palettes
Create beautiful color in generative art with HSL spirals, noise-based palettes, golden ratio sampling, and p5.js color algorithms for procedural aesthetics.
ก.พ. 20, 2026
Color in Form Design: Validation, Focus, and Error States
Master color usage in form design for validation states, focus indicators, and error handling. Build accessible, intuitive forms with strategic color choices.
ก.พ. 20, 2026
Color in Email Design: What Works Across Clients
Master email color design across Outlook, Gmail, and Apple Mail. Learn safe strategies, dark mode fixes, and inline style requirements for consistent results.
ก.พ. 20, 2026
Color in Design Systems at Scale: Lessons from Shopify, GitHub, and Atlassian
Learn color architecture patterns from Shopify Polaris, GitHub Primer, and Atlassian design tokens. Discover how large-scale design systems manage color decisions.
ก.พ. 20, 2026
Color in Data Visualization: Charts, Graphs, and Maps
Master color in data visualization. Learn sequential, diverging, and categorical scales, color blindness pitfalls, and best practices for accessible charts and maps.
ก.พ. 20, 2026
Color in Dashboard Design: Status, Alerts, and KPIs
Design effective dashboard color systems for status indicators, RAG scoring, chart palettes, and alert severity. Build accessible, scannable data interfaces.
ก.พ. 20, 2026
Color in 3D and WebGL: Linear Color Space and PBR
Understand color in 3D rendering — sRGB vs linear RGB, gamma correction, physically-based rendering colors, Three.js color management, and HDR in web 3D.
ก.พ. 20, 2026
Color Hierarchy in UI Design: Guiding the User's Eye
Create effective color hierarchy in UI design. Learn visual weight, primary vs secondary action colors, background layering, and focal point techniques.
ก.พ. 20, 2026
Color Harmony: Why Some Colors Work Together
Understand why some colors work together and others clash. Explore natural, cultural, and mathematical color harmony with practical palette-building examples.
ก.พ. 20, 2026
Color Gamut Explained: sRGB, P3, and Rec. 2020
Understand color gamuts—sRGB, Display P3, and Rec. 2020—and how to use CSS wide-gamut colors with @media (color-gamut) for modern displays. Practical examples included.
ก.พ. 20, 2026
Color for Data Storytelling: Beyond Default Chart Colors
Go beyond default chart colors for data storytelling. Learn sequential, diverging, and categorical palettes, accessibility in dataviz, and D3/Chart.js color scales.
ก.พ. 20, 2026
Color Converter Guide: HEX to RGB to HSL and Beyond
Master color format conversions: HEX, RGB, HSL, CMYK, and OKLCH. Learn when to use each format and how to convert them instantly with ColorFYI's converter tool.
ก.พ. 20, 2026
Color Contrast Algorithms: WCAG 2 vs APCA
Understand how WCAG 2 relative luminance and APCA (Advanced Perceptual Contrast Algorithm) calculate contrast. Compare results and learn which to use for accessible design.
ก.พ. 20, 2026
How to Use a Color Blindness Simulator for Accessible Design
Learn how to use a color blindness simulator to design accessible interfaces. Covers deuteranopia, protanopia, tritanopia, and practical design guidelines with real examples.
ก.พ. 20, 2026
Designing a Color API: REST Endpoints for Color Data
Design a RESTful color API with endpoints for color conversion, search, contrast checking, and palette generation. Learn schema design and best practices.
ก.พ. 20, 2026
Color Animation in CSS: Transitions and Keyframes
Master CSS color animation with transitions, keyframe animations, HSL hue rotation, OKLCH interpolation for perceptual smoothness, and performance best practices.
ก.พ. 20, 2026
How Color Influences Emotion and Decision-Making
Discover how color influences emotion and decision-making. Research shows 85% of purchase decisions involve color. Learn the science behind color psychology.
ก.พ. 20, 2026
Color Meanings Across Cultures: A Global Guide
Color meanings vary dramatically across cultures. Red means luck in China but danger in the West. White means mourning in Asia. A guide for global designers.
ก.พ. 20, 2026
Testing Color Accessibility in Figma: Plugins and Workflows
Test color accessibility in Figma with Stark, A11y plugins, and color blindness simulators. Build accessible design workflows with batch checking and handoff.
ก.พ. 20, 2026
Color Accessibility Checklist for Web Developers
A complete color accessibility checklist for web developers covering WCAG contrast ratios, color-alone reliance, focus indicators, testing tools, and automated checks.
ก.พ. 20, 2026
Coca-Cola Red: The World's Most Recognized Brand Color
The story of Coca-Cola Red (#F40009): why red was chosen, how the shade evolved, and why it became the most recognized brand color on earth. Includes exact hex codes.
ก.พ. 20, 2026
CMYK for Web Designers: When Print Meets Screen
Web designers working on print projects need to understand CMYK. Learn gamut differences, safe RGB-to-CMYK conversion strategies, print proofing workflows, and common pitfalls.
ก.พ. 20, 2026
CIELAB Color Space: How Humans Really See Color
CIELAB (L*a*b*) is the color space designed to match human vision. Learn how L*, a*, and b* axes work, what Delta E means, and why Lab is essential in color science.
ก.พ. 20, 2026
How to Choose Brand Colors: A Step-by-Step Guide
A step-by-step guide to choosing brand colors that resonate with your audience. Covers research, industry analysis, color psychology, combination testing, and brand guideline documentation.
ก.พ. 20, 2026
Chinese Traditional Colors: Symbolism and Meaning
Explore Chinese traditional colors with hex codes: imperial yellow, lucky red, mourning white, and the five elements. A complete guide to Chinese color symbolism.
ก.พ. 20, 2026
Charcoal vs Graphite vs Slate: Dark Gray Comparison
Compare charcoal (#36454F), graphite (#383838), and slate (#708090). Learn the differences between these popular dark gray shades for web design and UI.
ก.พ. 20, 2026
Chainlink Brand Colors: Oracle Blue and the Hexagon
Explore Chainlink's distinctive blue (#375BD2) and hexagon logo symbolism. Learn how oracle network branding builds enterprise trust in DeFi infrastructure.
ก.พ. 20, 2026
Cardano Brand Colors: Academic Blue Meets Blockchain
Discover Cardano's academic blue brand identity, its connection to research-driven blockchain development, and the exact hex codes used across the ecosystem.
ก.พ. 20, 2026
Building a Brand Color System From Scratch
Step-by-step guide to building a brand color system: choosing a primary, secondary, neutrals, semantic colors, and documentation that scales across teams.
ก.พ. 20, 2026
Bitcoin Orange: The Story Behind #F7931A
The complete story of Bitcoin's orange color #F7931A — who designed it, why orange was chosen, and how this single hex became the symbol of decentralized finance.
ก.พ. 20, 2026
Beige vs Cream: What's the Difference?
Compare beige (#F5F5DC) and cream (#FFFDD0) colors. Learn the hex code differences, visual distinctions, and when to use each in interior and web design.
ก.พ. 20, 2026
Bauhaus Color Theory: Kandinsky, Klee, and Itten
Explore Bauhaus color theory by Itten, Kandinsky, and Klee. Learn primary form-color associations, the color sphere, and Bauhaus legacy in modern design.
ก.พ. 20, 2026
Barbie Pink: The Color That Built an Empire
Explore the history of Barbie Pink (#DA1884), from Pantone's designation to the 2023 movie phenomenon, and how a single shade of pink built a billion-dollar cultural empire.
ก.พ. 20, 2026
Avalanche Brand Colors: Red Speed in Crypto
Discover Avalanche's bold red (#E84142) brand identity, triangle logo meaning, and how red communicates speed and power in the blockchain ecosystem.
ก.พ. 20, 2026
Art Deco Color Palette: Glamour and Geometric Design
Explore Art Deco color palettes with hex codes—gold, black, emerald, sapphire, and ruby. Discover 1920s glamour and how to use Art Deco colors in modern design.
ก.พ. 20, 2026
Aqua vs Teal vs Turquoise: Sorting Out Blue-Greens
Compare aqua (#00FFFF), teal (#008080), and turquoise (#40E0D0). Learn the hex code differences, visual distinctions, and when to use each blue-green shade.
ก.พ. 20, 2026
Apple's Evolution from Rainbow to Monochrome
Explore how Apple's brand colors evolved from a six-color rainbow logo to minimalist monochrome—and what each era's palette reveals about the company's identity.
ก.พ. 20, 2026
Analogous Color Schemes: Creating Visual Harmony
Learn how analogous color schemes use neighboring hues to create natural harmony. Includes tips for choosing palettes, real design examples, and hex codes.
ก.พ. 20, 2026
Amazon Brand Colors: From Bookstore Brown to Smile Orange
Trace Amazon's brand color evolution from bookstore brown to the iconic smile orange (#FF9900). Explore Prime blue, AWS colors, and sub-brand palettes.
ก.พ. 20, 2026
Airbnb Brand Colors: The Story Behind Rausch Red
Explore Airbnb's Rausch Red (#FF5A5F), the Bélo symbol's color evolution, and how Airbnb uses color to build trust and belonging in travel branding.
ก.พ. 20, 2026
AI Color Palette Generation: How Machine Learning Picks Colors
Explore how AI generates color palettes using machine learning. Compare popular AI color tools, learn prompt engineering for color, and understand limitations.
ก.พ. 20, 2026
African Color Traditions: Kente Cloth to Modern Design
Explore African color traditions from Kente cloth and Ndebele murals to Maasai red and contemporary African design. Discover symbolic meanings and hex codes.
ก.พ. 20, 2026
Adobe Color (color.adobe.com): Complete Guide
Master Adobe Color for palette creation, image extraction, accessibility testing, and CC Library integration. Complete guide to color.adobe.com features.
ก.พ. 20, 2026
Designing Accessible Color Palettes That Everyone Can Use
Learn to design accessible color palettes that meet WCAG standards. Covers color blindness, contrast ratios, redundant encoding, and testing workflows with real examples.
ก.พ. 20, 2026
Accessibility Beyond Contrast: Color in Inclusive Design
Color accessibility goes beyond contrast ratios. Learn WCAG's 'not by color alone' principle, focus indicators, error states, and color blind-friendly patterns.
ก.พ. 20, 2026