Beautiful Color Tokens
for React & React Native
A universal, type-safe color token system with primitive & semantic scales, full light/dark mode support, and built-in accessibility utilities.
$ npm install @laddhaanshul/color-tokens
Why @laddhaanshul/color-tokens?
Everything you need for consistent, accessible color systems across web and mobile.
Cross-Platform Tokens
One token set for React (web) and React Native (mobile). The package ships separate entry points for each platform with zero runtime platform detection.
Light & Dark Mode
Complete semantic token sets for both light and dark themes. Swap themes instantly by selecting the right token set — no color calculation at runtime.
WCAG Accessibility
Built-in meetsWcagAA(), getContrastRatio(), and getLuminance()
utilities ensure your color choices are accessible to everyone.
Full TypeScript
100% TypeScript with exported types for PrimitiveColorScale,
ColorShade, SemanticColorTheme, and every utility function.
Zero Dependencies
No runtime dependencies at all. The entire package is pure TypeScript that compiles to minimal JavaScript — just color values and utility functions.
CSS & RN Style Generators
Use tokensToCssVars() to generate CSS custom properties, or
tokensToReactNativeStyles() for StyleSheet-compatible objects.
Color Palette
Every color from primitiveColors — 22 scales × 11 shades each.
Click any swatch to copy its hex value.
Gray
Blue
Red
Green
Yellow
Purple
Orange
Pink
Teal
Indigo
Cyan
Slate
Zinc
Stone
Amber
Lime
Emerald
Sky
Violet
Fuchsia
Rose
Neutral
Solid
Code Examples
Simple, type-safe API that works the same on web and mobile.
import { lightSemanticColors, darkSemanticColors, primitiveColors, withOpacity, tokensToCssVars } from '@laddhaanshul/color-tokens'; // Apply semantic tokens as CSS custom properties const cssVars = tokensToCssVars(lightSemanticColors, 'ct'); // → { 'ct-background-primary': '#FFFFFF', ... } // Use in your component function App({ theme }) { const colors = theme === 'dark' ? darkSemanticColors : lightSemanticColors; return ( <div style={{ backgroundColor: colors.background.primary, color: colors.foreground.primary, }}> <button style={{ backgroundColor: colors.brand.primary, color: colors.foreground.onPrimary, boxShadow: `0 0 0 3px ${withOpacity(colors.brand.primary, 0.3)}`, }}> Get Started </button> <span style={{ color: colors.status.success }}> All systems operational </span> </div> ); }
import { lightSemanticColors, darkSemanticColors, withOpacity, tokensToReactNativeStyles, meetsWcagAA } from '@laddhaanshul/color-tokens'; // Convert tokens to flat RN-compatible styles const rnStyles = tokensToReactNativeStyles(lightSemanticColors); // → { 'background.primary': '#FFFFFF', ... } // Verify accessibility before rendering const isAccessible = meetsWcagAA( lightSemanticColors.status.errorText, lightSemanticColors.status.errorSubtle ); // → true function AlertBanner({ message }) { return ( <View style={{ backgroundColor: lightSemanticColors.status.errorSubtle, borderColor: lightSemanticColors.status.errorBorder, borderWidth: 1, borderRadius: 8, padding: 12, }}> <Text style={{ color: lightSemanticColors.status.errorText, fontSize: 14, }}> {message} </Text> </View> ); }
import { hexToRgb, hexToRgba, withOpacity, darken, lighten, isHexColor, getLuminance, getContrastRatio, meetsWcagAA } from '@laddhaanshul/color-tokens'; // Color conversion hexToRgb('#3B82F6'); // → { r: 59, g: 130, b: 246 } hexToRgba('#3B82F6', 0.5); // → 'rgba(59, 130, 246, 0.5)' // Color manipulation withOpacity('#EF4444', 0.15); // → 'rgba(239, 68, 68, 0.15)' darken('#3B82F6', 20); // → '#2e69c4' lighten('#3B82F6', 20); // → '#7aa5f8' // Validation isHexColor('#3B82F6'); // → true // Accessibility getContrastRatio('#000000', '#FFFFFF'); // → 21 meetsWcagAA('#111827', '#FFFFFF'); // → true (contrast ratio: 17.4) meetsWcagAA('#6B7280', '#FFFFFF'); // → false (contrast ratio: 3.95, needs 4.5)
Get Started
Install and start using color tokens in under a minute.
Install the package
Use npm, yarn, or pnpm — whatever your project uses.
npm install @laddhaanshul/color-tokens
# or
yarn add @laddhaanshul/color-tokens
# or
pnpm add @laddhaanshul/color-tokensImport tokens
Import what you need. The package tree-shakes cleanly so you only ship the tokens and utilities you actually use.
import {
primitiveColors,
lightSemanticColors,
darkSemanticColors
} from '@laddhaanshul/color-tokens';Use in your components
Apply tokens directly in your styles. Switch between light and dark themes by swapping the semantic token set.
const styles = {
container: {
backgroundColor: lightSemanticColors.background.primary,
color: lightSemanticColors.foreground.primary,
borderColor: lightSemanticColors.border.default,
},
button: {
backgroundColor: lightSemanticColors.brand.primary,
color: lightSemanticColors.foreground.onPrimary,
},
};That's it!
For React Native, the same import works — the package automatically resolves the native entry point. Check the GitHub repository for advanced usage patterns, theme switching, and more.