Documentation

Technical documentation for developers, integrators and anyone curious about how OmniColor works under the hood.

Architecture

OmniColor is a 100% static website. There is no server, no database, no authentication, and no server-side processing. This architecture provides several advantages:

  • Speed: Pages are served directly from CDN edge locations worldwide.
  • Security: No backend means no server vulnerabilities, no SQL injection, no unauthorized access to stored user data.
  • Privacy: Everything runs in your browser. Your data never leaves your device.
  • Reliability: Static sites rarely go down. No application servers to crash.
  • Cost: Static hosting is inexpensive, keeping the tools free.

Technology Stack

  • HTML5 — semantic markup for accessibility and SEO
  • CSS3 — modern CSS with custom properties
  • Vanilla JavaScript — no framework (no React, Vue, etc.)
  • SVG — inline icons and vector graphics
  • Web APIs — Canvas, Clipboard, EyeDropper, FileReader, localStorage
  • Cloudflare Pages — static hosting with global CDN

Browser APIs Used

  • Canvas API — pixel manipulation for image color extraction
  • FileReader API — local file reading (no upload)
  • Clipboard API — copy-to-clipboard functionality
  • EyeDropper API — native eyedropper (Chromium browsers only)
  • localStorage — saving preferences and favorites
  • Blob API — generating downloadable files
  • URL API — query parameter handling
  • Intersection Observer — lazy loading and view detection

Color Mathematics

All color conversions on OmniColor follow the CSS Color Module Level 4 specification.

HEX to RGB

Split the HEX code into three 2-digit pairs. Each pair is the hex representation of a channel value:

#155EEF
  15 → R = 1×16 + 5 = 21
  5E → G = 5×16 + 14 = 94
  EF → B = 14×16 + 15 = 239
= rgb(21, 94, 239)

RGB to HSL

Normalize R, G, B to [0,1]. Compute max, min and delta. Then:

L = (max + min) / 2
S = (max === min) ? 0 : delta / (1 - |2L - 1|)
H = computed based on which channel is max

HSL to RGB

Given H in [0,360], S and L in [0,1]:

q = L < 0.5 ? L × (1 + S) : L + S - L × S
p = 2L - q
R = hue2rgb(p, q, H/360 + 1/3)
G = hue2rgb(p, q, H/360)
B = hue2rgb(p, q, H/360 - 1/3)

WCAG Contrast Ratio

Per WCAG 2.2 specification:

For each channel c in [R, G, B] normalized to [0,1]:
  if c ≤ 0.03928: c' = c / 12.92
  else: c' = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R' + 0.7152 × G' + 0.0722 × B'

Contrast = (L1 + 0.05) / (L2 + 0.05)
where L1 > L2

Client-Side Image Processing

When you upload an image for color extraction, the processing flow is:

  1. The file is read via FileReader.readAsDataURL()
  2. An Image object is created from the data URL
  3. The image is drawn to an offscreen <canvas>
  4. getImageData() retrieves the pixel array
  5. Colors are quantized into buckets (typically 32-step RGB)
  6. The top N buckets by pixel count become the extracted palette
  7. The canvas is discarded when you navigate away

At no point is the image uploaded to any server. The complete pipeline runs on your device's CPU.

Design Tokens

OmniColor uses CSS custom properties for design tokens. Our token naming follows a semantic convention:

--color-primary: #155EEF
--color-primary-hover: #0F4BD1
--color-secondary: #2563EB
--color-dark: #15243B
--color-white: #FFFFFF
--color-border: #E3EAF5

Configuration System

OmniColor uses JavaScript configuration files loaded as global objects. This allows configuration to be shared across pages without a build step:

  • /config/site-config.js — site name, URLs, social links
  • /config/navigation-config.js — main menu structure
  • /config/footer-config.js — footer link groups
  • /config/ads-config.js — centralized ad placement
  • /config/seo-config.js — SEO defaults and metadata
  • /config/tools-config.js — tool catalog and categories

Component Architecture

UI components are implemented as JavaScript modules that build and attach DOM elements:

  • /components/header.js — builds the site header with navigation
  • /components/footer.js — builds the footer
  • /components/breadcrumbs.js — auto-generates breadcrumbs from URL
  • /components/ad-manager.js — injects ads based on configuration
  • /components/cookie-consent.js — shows consent banner when needed
  • /components/schema.js — injects JSON-LD structured data

Each component is self-contained and can be loaded independently.

Ad Management

All advertising is managed centrally via /config/ads-config.js. Individual pages don't include ad code — they include placement markers:

<div data-ad-slot="header"></div>

The ad manager reads the config, checks consent and eligibility, and injects the corresponding ad unit. Ad codes are never hardcoded into HTML files.

Progressive Web App

OmniColor is a PWA. When you visit the site, your browser may offer to install it as a standalone app. The PWA manifest is at /manifest.webmanifest.

Service worker caching ensures core pages work offline once visited. Cache strategy prioritizes:

  • HTML pages: network-first, cache fallback
  • CSS/JS: cache-first
  • Images: cache-first with versioned cache keys
  • Ads: never cached

API Reference

OmniColor does not offer a public REST API. All color operations are available through the browser UI. If you need programmatic color conversions, you have two options:

  1. Use the UI: Paste your colors into the appropriate tool.
  2. Use the source: Our color math is implemented in plain JavaScript in /assets/js/color-utils.js. You can read and adapt it for your own projects (see our Copyright Policy for terms).

For developer inquiries, contact developers@omnicolor.pages.dev.

Further Reading