Color foundations
Oxbow has it’s own color palette called Kromatika, an open-source color palette ready to use in web design and user interfaces. Kromatika color system
Charcoal
--color-charcoal-50: oklch(0.973 0.002 247.8);
--color-charcoal-100: oklch(0.930 0.003 247.9);
--color-charcoal-200: oklch(0.863 0.006 255.5);
--color-charcoal-300: oklch(0.787 0.011 256.7);
--color-charcoal-400: oklch(0.702 0.016 264.5);
--color-charcoal-500: oklch(0.612 0.018 262.7);
--color-charcoal-600: oklch(0.519 0.021 261.3);
--color-charcoal-700: oklch(0.427 0.021 264.3);
--color-charcoal-800: oklch(0.339 0.019 260.7);
--color-charcoal-900: oklch(0.256 0.018 266.3);
Metal
--color-metal-50: oklch(0.970 0.003 264.5);
--color-metal-100: oklch(0.925 0.007 268.5);
--color-metal-200: oklch(0.852 0.016 270.0);
--color-metal-300: oklch(0.774 0.023 272.0);
--color-metal-400: oklch(0.693 0.024 269.3);
--color-metal-500: oklch(0.607 0.025 269.3);
--color-metal-600: oklch(0.512 0.029 273.1);
--color-metal-700: oklch(0.429 0.022 271.9);
--color-metal-800: oklch(0.341 0.016 270.9);
--color-metal-900: oklch(0.249 0.015 274.2);
Haiti
--color-haiti-50: oklch(0.964 0.008 301.4);
--color-haiti-100: oklch(0.933 0.015 298.6);
--color-haiti-200: oklch(0.846 0.021 295.1);
--color-haiti-300: oklch(0.724 0.023 297.3);
--color-haiti-400: oklch(0.560 0.023 294.8);
--color-haiti-500: oklch(0.458 0.044 293.1);
--color-haiti-600: oklch(0.367 0.060 291.0);
--color-haiti-700: oklch(0.287 0.068 287.3);
--color-haiti-800: oklch(0.228 0.074 284.6);
--color-haiti-900: oklch(0.204 0.061 285.3);
Purple
--color-purple-50: oklch(0.922 0.039 293.5);
--color-purple-100: oklch(0.848 0.079 292.7);
--color-purple-200: oklch(0.767 0.118 290.5);
--color-purple-300: oklch(0.702 0.147 288.3);
--color-purple-400: oklch(0.605 0.193 284.9);
--color-purple-500: oklch(0.507 0.190 282.6);
--color-purple-600: oklch(0.419 0.181 279.7);
--color-purple-700: oklch(0.341 0.165 276.9);
--color-purple-800: oklch(0.285 0.151 274.4);
--color-purple-900: oklch(0.247 0.126 274.9);
BlueBerry
--color-blueBerry-50: oklch(0.931 0.033 268.7);
--color-blueBerry-100: oklch(0.861 0.068 269.4);
--color-blueBerry-200: oklch(0.789 0.106 269.7);
--color-blueBerry-300: oklch(0.733 0.137 269.9);
--color-blueBerry-400: oklch(0.643 0.190 269.1);
--color-blueBerry-500: oklch(0.542 0.189 269.3);
--color-blueBerry-600: oklch(0.450 0.180 269.0);
--color-blueBerry-700: oklch(0.366 0.164 268.7);
--color-blueBerry-800: oklch(0.306 0.152 268.1);
--color-blueBerry-900: oklch(0.264 0.129 268.6);
Blue
--color-blue-50: oklch(0.950 0.023 250.1);
--color-blue-100: oklch(0.883 0.057 246.9);
--color-blue-200: oklch(0.814 0.095 245.4);
--color-blue-300: oklch(0.749 0.130 245.9);
--color-blue-400: oklch(0.701 0.156 247.3);
--color-blue-500: oklch(0.609 0.202 257.2);
--color-blue-600: oklch(0.544 0.188 258.2);
--color-blue-700: oklch(0.477 0.173 259.6);
--color-blue-800: oklch(0.411 0.158 261.0);
--color-blue-900: oklch(0.348 0.138 261.6);
Sky
--color-sky-50: oklch(0.962 0.048 198.0);
--color-sky-100: oklch(0.915 0.085 205.0);
--color-sky-200: oklch(0.862 0.113 213.2);
--color-sky-300: oklch(0.808 0.131 223.4);
--color-sky-400: oklch(0.730 0.158 237.3);
--color-sky-500: oklch(0.618 0.153 244.7);
--color-sky-600: oklch(0.514 0.145 250.4);
--color-sky-700: oklch(0.416 0.136 255.2);
--color-sky-800: oklch(0.345 0.127 258.3);
--color-sky-900: oklch(0.295 0.104 257.6);
Turquoise
--color-turquoise-50: oklch(0.957 0.052 181.3);
--color-turquoise-100: oklch(0.925 0.094 185.7);
--color-turquoise-200: oklch(0.892 0.122 191.3);
--color-turquoise-300: oklch(0.846 0.130 198.7);
--color-turquoise-400: oklch(0.761 0.131 210.7);
--color-turquoise-500: oklch(0.642 0.118 222.1);
--color-turquoise-600: oklch(0.530 0.110 233.8);
--color-turquoise-700: oklch(0.427 0.101 242.1);
--color-turquoise-800: oklch(0.353 0.097 249.1);
--color-turquoise-900: oklch(0.306 0.082 248.2);
Persian Green
--color-persianGreen-50: oklch(0.946 0.057 165.6);
--color-persianGreen-100: oklch(0.902 0.103 168.3);
--color-persianGreen-200: oklch(0.830 0.127 172.1);
--color-persianGreen-300: oklch(0.746 0.125 177.0);
--color-persianGreen-400: oklch(0.637 0.112 183.3);
--color-persianGreen-500: oklch(0.573 0.097 193.9);
--color-persianGreen-600: oklch(0.479 0.081 205.1);
--color-persianGreen-700: oklch(0.388 0.069 218.0);
--color-persianGreen-800: oklch(0.320 0.064 230.9);
--color-persianGreen-900: oklch(0.274 0.053 228.8);
Pastel Green
—color-pastelGreen-50: oklch(0.948 0.071 143.8); —color-pastelGreen-100: oklch(0.903 0.134 146.0); —color-pastelGreen-200: oklch(0.841 0.175 147.2); —color-pastelGreen-300: oklch(0.773 0.182 148.7); —color-pastelGreen-400: oklch(0.686 0.186 149.1); —color-pastelGreen-500: oklch(0.615 0.156 152.2); —color-pastelGreen-600: oklch(0.541 0.126 156.8); —color-pastelGreen-700: oklch(0.465 0.098 162.8); —color-pastelGreen-800: oklch(0.410 0.080 169.2); —color-pastelGreen-900: oklch(0.358 0.069 170.0);
--color-grass-50: oklch(0.959 0.053 134.2);
--color-grass-100: oklch(0.920 0.109 137.2);
--color-grass-200: oklch(0.841 0.154 139.7);
--color-grass-300: oklch(0.751 0.175 141.7);
--color-grass-400: oklch(0.634 0.188 142.8);
--color-grass-500: oklch(0.564 0.168 143.8);
--color-grass-600: oklch(0.495 0.145 145.0);
--color-grass-700: oklch(0.425 0.121 146.4);
--color-grass-800: oklch(0.375 0.102 148.4);
--color-grass-900: oklch(0.330 0.088 148.5);
Carrot
--color-carrot-50: oklch(0.966 0.041 88.8);
--color-carrot-100: oklch(0.928 0.079 85.5);
--color-carrot-200: oklch(0.884 0.111 80.4);
--color-carrot-300: oklch(0.844 0.132 73.8);
--color-carrot-400: oklch(0.785 0.162 64.8);
--color-carrot-500: oklch(0.681 0.150 59.0);
--color-carrot-600: oklch(0.579 0.137 53.2);
--color-carrot-700: oklch(0.483 0.122 49.3);
--color-carrot-800: oklch(0.410 0.113 44.3);
--color-carrot-900: oklch(0.350 0.093 45.6);
Orange
--color-orange-50: oklch(0.948 0.039 71.0);
--color-orange-100: oklch(0.885 0.076 60.8);
--color-orange-200: oklch(0.816 0.117 52.3);
--color-orange-300: oklch(0.756 0.154 43.8);
--color-orange-400: oklch(0.679 0.213 36.5);
--color-orange-500: oklch(0.589 0.203 32.9);
--color-orange-600: oklch(0.504 0.187 30.4);
--color-orange-700: oklch(0.423 0.165 28.9);
--color-orange-800: oklch(0.368 0.145 27.2);
--color-orange-900: oklch(0.314 0.122 26.5);
Red
--color-red-50: oklch(0.934 0.036 51.0);
--color-red-100: oklch(0.858 0.076 39.8);
--color-red-200: oklch(0.772 0.127 32.5);
--color-red-300: oklch(0.702 0.173 27.7);
--color-red-400: oklch(0.625 0.232 27.2);
--color-red-500: oklch(0.555 0.208 23.8);
--color-red-600: oklch(0.486 0.183 19.8);
--color-red-700: oklch(0.415 0.157 15.0);
--color-red-800: oklch(0.364 0.139 9.4);
--color-red-900: oklch(0.316 0.119 8.2);
Raspberry
--color-raspberry-50: oklch(0.915 0.042 25.2);
--color-raspberry-100: oklch(0.824 0.097 18.6);
--color-raspberry-200: oklch(0.750 0.148 15.1);
--color-raspberry-300: oklch(0.701 0.186 10.9);
--color-raspberry-400: oklch(0.646 0.232 10.1);
--color-raspberry-500: oklch(0.577 0.213 4.3);
--color-raspberry-600: oklch(0.507 0.193 357.9);
--color-raspberry-700: oklch(0.436 0.171 351.4);
--color-raspberry-800: oklch(0.384 0.155 345.5);
--color-raspberry-900: oklch(0.328 0.131 345.7);
Fuchsia
--color-fuchsia-50: oklch(0.898 0.070 340.0);
--color-fuchsia-100: oklch(0.810 0.150 337.6);
--color-fuchsia-200: oklch(0.742 0.229 335.2);
--color-fuchsia-300: oklch(0.712 0.279 332.4);
--color-fuchsia-400: oklch(0.699 0.320 328.8);
--color-fuchsia-500: oklch(0.597 0.281 324.0);
--color-fuchsia-600: oklch(0.498 0.240 318.9);
--color-fuchsia-700: oklch(0.406 0.202 313.5);
--color-fuchsia-800: oklch(0.337 0.172 308.0);
--color-fuchsia-900: oklch(0.291 0.148 309.2);