Colour system
Opacity ladder
Eleven alpha steps on the Pogson magnitude scale. Any colour stop can use any step.
Formula
Astronomers measure brightness in magnitudes. The Pogson relation says a difference of five magnitudes is exactly a factor of 100 in flux:
so one magnitude is a ratio of . The ladder steps through alpha in half-magnitude increments:
Ten steps are five magnitudes, so and the last step is exactly 100 times dimmer than the first. To find the nearest step for an arbitrary alpha, invert the relation:
The scale
| Step n | Magnitude | Alpha (computed) | Alpha (CSS) | Token | Swatch |
|---|---|---|---|---|---|
| 0 | 0.0 | 1.00 | 100% | --mag-0 | |
| 1 | 0.5 | 0.63 | 63.1% | --mag-1 | |
| 2 | 1.0 | 0.40 | 39.81% | --mag-2 | |
| 3 | 1.5 | 0.25 | 25.12% | --mag-3 | |
| 4 | 2.0 | 0.16 | 15.85% | --mag-4 | |
| 5 | 2.5 | 0.10 | 10% | --mag-5 | |
| 6 | 3.0 | 0.06 | 6.31% | --mag-6 | |
| 7 | 3.5 | 0.04 | 3.98% | --mag-7 | |
| 8 | 4.0 | 0.03 | 2.51% | --mag-8 | |
| 9 | 4.5 | 0.02 | 1.58% | --mag-9 | |
| 10 | 5.0 | 0.01 | 1% | --mag-10 |
Try a stop
Choose any stop to see it at all eleven steps over the deep space background.
bg-deep-space-300/(--mag-3)Same result as the Tailwind class form shown below the tiles.
Stop by step
The same ladder applied to every stop of one palette. Select a cell to copy its class.
Select a cell to copy its Tailwind class.
Rows are stops 50 to 950, columns are --mag-0 to --mag-10, over deep-space-950.
Usage
<!-- Tailwind --><div class="bg-deep-space-300/(--mag-3)"></div>/* the equivalent plain CSS */.b { background: color-mix(in srgb, var(--color-deep-space-300) var(--mag-3), transparent);}@theme static { --mag-0: 100%; --mag-1: 63.1%; --mag-2: 39.81%; --mag-3: 25.12%; --mag-4: 15.85%; --mag-5: 10%; --mag-6: 6.31%; --mag-7: 3.98%; --mag-8: 2.51%; --mag-9: 1.58%; --mag-10: 1%;}import 'dart:math' as math;/// Astr opacity ladder: the Pogson magnitude scale.////// alpha(n) = 10^(-0.4 * n / 2), so each step is half a magnitude and ten/// steps (five magnitudes) is exactly 100x dimmer. Any colour stop may use/// any step. The constants mirror the `--mag-*` values in `globals.css`/// (same rounding), so web and Flutter render identically.////// Usage: `AstrColors.auroraGreen[400]!.withValues(alpha: Mag.m3)`abstract final class Mag { static const double m0 = 1.0; static const double m1 = 0.631; static const double m2 = 0.3981; static const double m3 = 0.2512; static const double m4 = 0.1585; static const double m5 = 0.1; static const double m6 = 0.0631; static const double m7 = 0.0398; static const double m8 = 0.0251; static const double m9 = 0.0158; static const double m10 = 0.01; /// Index with the step number: `Mag.steps[3] == Mag.m3`. static const List<double> steps = <double>[ m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, // ]; /// The exact formula, for checking the constants or generating new steps. static double alpha(int n) => math.pow(10, -0.4 * n / 2).toDouble(); /// Nearest ladder step for [alpha] (clamped to 1). Returns null when the /// value is at least 10.5 half-steps down, meaning fully transparent. static int? snap(double alpha) { final double a = math.min(1.0, alpha); final double nRaw = -5 * (math.log(a) / math.ln10); if (nRaw >= 10.5) return null; return nRaw.round().clamp(0, 10); }}