Skip to content

Commit 14a973e

Browse files
simonvreemanclaude
simonvreeman
and
claude
committed
Convert all CSS colors to oklch()
Replace hex, rgb(), rgba(), hsl(), and named colors with oklch() across 92 files. Remove -rgb variable hack from Seneca/Stockdale/Meditations/ Discourses files. Use oklch interpolation for gradients and color-mix. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent fe1b06f commit 14a973e

92 files changed

Lines changed: 880 additions & 1126 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎cro.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
<title>🆎 The 2025 Conversion Rate Optimization (CRO) Tools list</title>
1010
<style>
1111
:root {
12-
--black: rgba(0, 0, 0, .8);
13-
--blue-dark: rgb(0, 112, 201);
14-
--blue-light: rgb(102, 187, 255);
15-
--gray: rgb(204, 204, 204);
12+
--black: oklch(0.00 0.00 none / 0.8);
13+
--blue-dark: oklch(0.54 0.16 251.90);
14+
--blue-light: oklch(0.77 0.13 244.77);
15+
--gray: oklch(0.85 0.00 none);
1616
}
1717
@view-transition {
1818
navigation: auto;
@@ -21,7 +21,7 @@
2121
scroll-behavior: smooth;
2222
}
2323
body {
24-
background-color: rgba(0, 0, 0, 0);
24+
background-color: oklch(0 0 none / 0);
2525
color: var(--black);
2626
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2727
font-size: 1.125rem;
@@ -72,7 +72,7 @@
7272
@media (prefers-color-scheme: dark) {
7373
body {
7474
background-color: var(--black);
75-
color: rgba(255, 255, 255, 1);
75+
color: oklch(1.00 0.00 none);
7676
word-spacing: .05em;
7777
}
7878
a {

‎discourses/enchiridion.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,12 @@
99
<style>
1010
:root {
1111
color-scheme: dark light;
12-
--eigengrau: #16161d;
13-
--blue-dark: #06c;
14-
--blue-dark-rgb: 0, 102, 204;
15-
--blue-light: #2997ff;
16-
--blue-light-rgb: 41, 151, 255;
17-
--blue-lighter: #6bf;
18-
--blue-lighter-rgb: 102,187,255;
19-
--gray: rgb(204, 204, 204);
20-
--white: #f5f5f7;
12+
--eigengrau: oklch(0.20 0.01 285.06);
13+
--blue-dark: oklch(0.52 0.18 255.84);
14+
--blue-light: oklch(0.67 0.18 251.85);
15+
--blue-lighter: oklch(0.77 0.13 244.77);
16+
--gray: oklch(0.85 0.00 none);
17+
--white: oklch(0.97 0.00 285.23);
2118
--sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
2219
--serif: ui-serif, -apple-system-ui-serif, Palatino, Georgia, Cambria, "Times New Roman", Times, serif;
2320
--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Roboto Mono", "Liberation Mono", "Courier New", monospace;
@@ -146,7 +143,7 @@
146143
}
147144
mark {
148145
color: var(--eigengrau);
149-
background-color: rgba( var(--blue-lighter-rgb), 0.2);
146+
background-color: oklch(0.77 0.13 244.77 / 0.2);
150147
padding: .25rem;
151148
white-space: pre-wrap;
152149
}
@@ -247,7 +244,7 @@
247244
line-height: 1.618;
248245
}
249246
a, body, li::marker {
250-
color: #000;
247+
color: oklch(0.00 0.00 none);
251248
}
252249
a {
253250
text-decoration: none;
@@ -256,8 +253,8 @@
256253
display: none;
257254
}
258255
mark, mark[title], mark[title] > a {
259-
background-color: #fff;
260-
color: #000;
256+
background-color: oklch(1.00 0.00 none);
257+
color: oklch(0.00 0.00 none);
261258
}
262259
main table, nav ul, ul ul, ul ul ul {
263260
font-size: 80%;

‎discourses/fragments.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,12 @@
99
<style>
1010
:root {
1111
color-scheme: dark light;
12-
--eigengrau: #16161d;
13-
--blue-dark: #06c;
14-
--blue-dark-rgb: 0, 102, 204;
15-
--blue-light: #2997ff;
16-
--blue-light-rgb: 41, 151, 255;
17-
--blue-lighter: #6bf;
18-
--blue-lighter-rgb: 102,187,255;
19-
--gray: rgb(204, 204, 204);
20-
--white: #f5f5f7;
12+
--eigengrau: oklch(0.20 0.01 285.06);
13+
--blue-dark: oklch(0.52 0.18 255.84);
14+
--blue-light: oklch(0.67 0.18 251.85);
15+
--blue-lighter: oklch(0.77 0.13 244.77);
16+
--gray: oklch(0.85 0.00 none);
17+
--white: oklch(0.97 0.00 285.23);
2118
--sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
2219
--serif: ui-serif, -apple-system-ui-serif, Palatino, Georgia, Cambria, "Times New Roman", Times, serif;
2320
--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Roboto Mono", "Liberation Mono", "Courier New", monospace;
@@ -146,7 +143,7 @@
146143
}
147144
mark {
148145
color: var(--eigengrau);
149-
background-color: rgba( var(--blue-lighter-rgb), 0.2);
146+
background-color: oklch(0.77 0.13 244.77 / 0.2);
150147
padding: .25rem;
151148
white-space: pre-wrap;
152149
}
@@ -230,7 +227,7 @@
230227
line-height: 1.618;
231228
}
232229
a, body, li::marker {
233-
color: #000;
230+
color: oklch(0.00 0.00 none);
234231
}
235232
a {
236233
text-decoration: none;
@@ -239,8 +236,8 @@
239236
display: none;
240237
}
241238
mark, mark[title], mark[title] > a {
242-
background-color: #fff;
243-
color: #000;
239+
background-color: oklch(1.00 0.00 none);
240+
color: oklch(0.00 0.00 none);
244241
}
245242
main table, nav ul, ul ul, ul ul ul {
246243
font-size: 80%;

‎discourses/george-long.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,12 @@
1212
<style>
1313
:root {
1414
color-scheme: dark light;
15-
--eigengrau: #16161d;
16-
--blue-dark: #06c;
17-
--blue-dark-rgb: 0, 102, 204;
18-
--blue-light: #2997ff;
19-
--blue-light-rgb: 41, 151, 255;
20-
--blue-lighter: #6bf;
21-
--blue-lighter-rgb: 102,187,255;
22-
--gray: rgb(204, 204, 204);
23-
--white: #f5f5f7;
15+
--eigengrau: oklch(0.20 0.01 285.06);
16+
--blue-dark: oklch(0.52 0.18 255.84);
17+
--blue-light: oklch(0.67 0.18 251.85);
18+
--blue-lighter: oklch(0.77 0.13 244.77);
19+
--gray: oklch(0.85 0.00 none);
20+
--white: oklch(0.97 0.00 285.23);
2421
--sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
2522
--serif: ui-serif, -apple-system-ui-serif, Palatino, Georgia, Cambria, "Times New Roman", Times, serif;
2623
--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Roboto Mono", "Liberation Mono", "Courier New", monospace;
@@ -149,7 +146,7 @@
149146
}
150147
mark {
151148
color: var(--eigengrau);
152-
background-color: rgba( var(--blue-lighter-rgb), 0.2);
149+
background-color: oklch(0.77 0.13 244.77 / 0.2);
153150
padding: .25rem;
154151
white-space: pre-wrap;
155152
}
@@ -233,7 +230,7 @@
233230
line-height: 1.618;
234231
}
235232
a, body, li::marker {
236-
color: #000;
233+
color: oklch(0.00 0.00 none);
237234
}
238235
a {
239236
text-decoration: none;
@@ -242,8 +239,8 @@
242239
display: none;
243240
}
244241
mark, mark[title], mark[title] > a {
245-
background-color: #fff;
246-
color: #000;
242+
background-color: oklch(1.00 0.00 none);
243+
color: oklch(0.00 0.00 none);
247244
}
248245
main table, nav ul, ul ul, ul ul ul {
249246
font-size: 80%;

‎discourses/index.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,12 @@
99
<style>
1010
:root {
1111
color-scheme: dark light;
12-
--eigengrau: #16161d;
13-
--blue-dark: #06c;
14-
--blue-dark-rgb: 0, 102, 204;
15-
--blue-light: #2997ff;
16-
--blue-light-rgb: 41, 151, 255;
17-
--blue-lighter: #6bf;
18-
--blue-lighter-rgb: 102,187,255;
19-
--gray: rgb(204, 204, 204);
20-
--white: #f5f5f7;
12+
--eigengrau: oklch(0.20 0.01 285.06);
13+
--blue-dark: oklch(0.52 0.18 255.84);
14+
--blue-light: oklch(0.67 0.18 251.85);
15+
--blue-lighter: oklch(0.77 0.13 244.77);
16+
--gray: oklch(0.85 0.00 none);
17+
--white: oklch(0.97 0.00 285.23);
2118
--sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
2219
--serif: ui-serif, -apple-system-ui-serif, Palatino, Georgia, Cambria, "Times New Roman", Times, serif;
2320
--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Roboto Mono", "Liberation Mono", "Courier New", monospace;
@@ -146,7 +143,7 @@
146143
}
147144
mark {
148145
color: var(--eigengrau);
149-
background-color: rgba( var(--blue-lighter-rgb), 0.2);
146+
background-color: oklch(0.77 0.13 244.77 / 0.2);
150147
padding: .25rem;
151148
white-space: pre-wrap;
152149
}
@@ -230,7 +227,7 @@
230227
line-height: 1.618;
231228
}
232229
a, body, li::marker {
233-
color: #000;
230+
color: oklch(0.00 0.00 none);
234231
}
235232
a {
236233
text-decoration: none;
@@ -239,8 +236,8 @@
239236
display: none;
240237
}
241238
mark, mark[title], mark[title] > a {
242-
background-color: #fff;
243-
color: #000;
239+
background-color: oklch(1.00 0.00 none);
240+
color: oklch(0.00 0.00 none);
244241
}
245242
main table, nav ul, ul ul, ul ul ul {
246243
font-size: 80%;

‎experiment.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
}
4444
hr {
4545
border: 0;
46-
border-top: 1px solid #ccc;
46+
border-top: 1px solid oklch(0.85 0.00 none);
4747
}
4848
footer {
4949
font-size: 1rem;

‎gear.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
<title>🎒 Travel Gear - What is in my Goruck backpacks? &middot; Simon Vreeman</title>
1010
<style>
1111
:root {
12-
--black: rgba(0, 0, 0, .8);
13-
--blue-dark: rgb(0, 112, 201);
14-
--blue-light: rgb(102, 187, 255);
15-
--gray: rgb(204, 204, 204);
12+
--black: oklch(0.00 0.00 none / 0.8);
13+
--blue-dark: oklch(0.54 0.16 251.90);
14+
--blue-light: oklch(0.77 0.13 244.77);
15+
--gray: oklch(0.85 0.00 none);
1616
}
1717
@view-transition {
1818
navigation: auto;
1919
}
2020
body {
21-
background-color: rgba(0, 0, 0, 0);
21+
background-color: oklch(0 0 none / 0);
2222
color: var(--black);
2323
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2424
font-size: 1.125rem;
@@ -67,7 +67,7 @@
6767
padding: 3px;
6868
}
6969
tbody tr:nth-child(odd) {
70-
background-color: #eee;
70+
background-color: oklch(0.95 0.00 none);
7171
}
7272
caption {
7373
caption-side: bottom;
@@ -88,7 +88,7 @@
8888
@media (prefers-color-scheme: dark) {
8989
body {
9090
background-color: var(--black);
91-
color: rgba(255, 255, 255, 1);
91+
color: oklch(1.00 0.00 none);
9292
word-spacing: .05em;
9393
}
9494
a {
@@ -98,7 +98,7 @@
9898
color: var(--blue-dark);
9999
}
100100
tbody tr:nth-child(odd) {
101-
background-color: rgba(0, 0, 0, .3);
101+
background-color: oklch(0.00 0.00 none / 0.3);
102102
}
103103
}
104104
</style>

‎hypothesis.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
<title>Experiment Hypothesis Builder for A/B Tests</title>
99
<style>
1010
:root {
11-
--black: rgba(0, 0, 0, .8);
12-
--blue-dark: rgb(0, 112, 201);
13-
--blue-light: rgb(102, 187, 255);
14-
--gray: rgb(204, 204, 204);
15-
--white: rgba(255, 255, 255, 1);
11+
--black: oklch(0.00 0.00 none / 0.8);
12+
--blue-dark: oklch(0.54 0.16 251.90);
13+
--blue-light: oklch(0.77 0.13 244.77);
14+
--gray: oklch(0.85 0.00 none);
15+
--white: oklch(1.00 0.00 none);
1616
}
1717
@view-transition {
1818
navigation: auto;
@@ -27,7 +27,7 @@
2727
margin: 1% auto;
2828
padding: 0 3%;
2929
max-width: 30em;
30-
background-color: rgba(0, 0, 0, 0);
30+
background-color: oklch(0 0 none / 0);
3131
color: var(--black);
3232
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
3333
font-size: 1.125rem;

‎if.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
}
4444
hr {
4545
border: 0;
46-
border-top: 1px solid #ccc;
46+
border-top: 1px solid oklch(0.85 0.00 none);
4747
}
4848
footer {
4949
font-size: 1rem;

0 commit comments

Comments
 (0)