{"id":1483,"date":"2025-03-29T16:49:30","date_gmt":"2025-03-29T16:49:30","guid":{"rendered":"https:\/\/www.christianfaur.com\/NewSite\/?p=1483"},"modified":"2025-08-10T12:58:31","modified_gmt":"2025-08-10T12:58:31","slug":"introducing-the-color-alphabet","status":"publish","type":"post","link":"https:\/\/www.christianfaur.com\/NewSite\/2025\/03\/29\/introducing-the-color-alphabet\/","title":{"rendered":"Introducing the Color Alphabet"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><em>Turning Letters into Colors to Create a Visual Language<\/em><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/images\/theQuickBrownFox.png\" alt=\"T h e    q u i c k    b r o w n    f o x    j u m p s    o v e r    t h e    l a z y    d o g.\"\/><figcaption class=\"wp-element-caption\">T h e   q u i c k    b r o w n    f o x    j u m p s    o v e r    t h e    l a z y    d o g.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Color surrounds us daily, influencing emotions, guiding our decisions, and shaping the way we interpret the world. Colors can signal warnings\u2014like yellow caution signs or red stop lights\u2014and even represent deep cultural meanings. However, the meanings we assign to color often differ dramatically from one culture to another. What if color could transcend these cultural differences and serve as a universal form of communication?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"336\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/Hamlet.jpg\" alt=\"\" class=\"wp-image-1486\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/Hamlet.jpg 504w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/Hamlet-300x200.jpg 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><figcaption class=\"wp-element-caption\"><strong>Hamlet (detail view)<\/strong>, 2007<br>Hand cast encaustic crayons<br>12 in x 12 in.<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">That idea inspired me to create the&nbsp;<strong>Color Alphabet<\/strong>.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As an artist, I constantly explore ways to embed meaning in my work. My journey began with a search for a universal way to communicate through color\u2014something that wouldn\u2019t lose its meaning from one culture to another. Realizing the difficulty in creating entirely new meanings for colors, I instead chose to map colors directly to something familiar: the English alphabet.  The alphabet is a universal system that we already understand. By pairing each letter with a distinct color, I created a way for text to become a visual experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Historical Inspirations and Modern Examples<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Throughout history, people have used color symbolically to represent clans, flags, military units, and even complex messages. The ancient Incas, for example, communicated through colored strings and knots known as <a href=\"https:\/\/www.ee.torontomu.ca\/~elf\/abacus\/inca-khipu.html\">Quipu<\/a>, effectively turning color into language.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In modern life, colors help engineers read <a href=\"https:\/\/en.wikipedia.org\/wiki\/Electronic_color_code\">resistor values<\/a> and wire codes, and marketers use them to evoke brand recognition instantly. This inspired me to create a practical yet artistic system of encoding language directly into color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Selecting the Colors: A Visual and Practical Approach<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-gallery alignright has-nested-images columns-1 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/droppedImage-1-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"287\" height=\"97\" data-id=\"1489\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/droppedImage-1-1.png\" alt=\"\" class=\"wp-image-1489\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/graph-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"527\" height=\"221\" data-id=\"1490\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/graph-1.png\" alt=\"\" class=\"wp-image-1490\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/graph-1.png 527w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/graph-1-300x126.png 300w\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Choosing 26 distinct colors wasn\u2019t straightforward. Human eyes can distinguish millions of colors when placed side-by-side but struggle to recall specific colors accurately over time. Research shows that most languages use only 12 fundamental color terms consistently recognized by everyone\u2014colors like red, blue, green, and yellow.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To design the Color Alphabet, I began with these 12 universally recognized colors. I removed white to use as the background, leaving 11 colors. Then, guided by how often letters appear in English (letter frequency), I assigned the most common vowels (A, E, I, O, U) the brightest, most vivid colors to ensure quick recognition:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A:<\/strong>&nbsp;Blue<br><strong>E:<\/strong>&nbsp;Orange<br><strong>I:<\/strong>&nbsp;Yellow<br><strong>O:<\/strong>&nbsp;Red<br><strong>U:<\/strong>&nbsp;Green<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Next, frequently used consonants received easily distinguishable secondary colors. Finally, the remaining letters were assigned carefully varied shades and hues to ensure each letter remained distinct and identifiable.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/examp.png\"><img loading=\"lazy\" decoding=\"async\" width=\"526\" height=\"309\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/examp.png\" alt=\"\" class=\"wp-image-1508\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/examp.png 526w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/examp-300x176.png 300w\" sizes=\"auto, (max-width: 526px) 100vw, 526px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>The Font: Specially Designed Glyphs<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/glyphs-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/glyphs-1-150x150.jpg\" alt=\"\" class=\"wp-image-1495\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/glyphs-1-150x150.jpg 150w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/glyphs-1-298x300.jpg 298w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/glyphs-1-510x510.jpg 510w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/glyphs-1.jpg 540w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Standard fonts didn\u2019t fully support this new visual language, so I designed special glyphs\u2014simple vertical rectangles\u2014to carry the colors. Capital letters gained curves at the top, making them visually unique yet still easy to recognize. Custom punctuation symbols clearly mark sentence beginnings and endings, helping readers quickly understand the flow and rhythm of the text (seen below top row: period, ? ! and , )<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This carefully crafted font makes reading color text more intuitive, even at higher densities.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"80\" class=\"wp-image-1498\" style=\"width: 500px;\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/exampleMarks-edited.png\" alt=\"\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/exampleMarks-edited.png 540w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/exampleMarks-edited-300x48.png 300w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/exampleMarks-edited-528x86.png 528w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Can We Really Read Color as Easily as Text?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Initially, reading colored text might feel unfamiliar. Traditional reading relies on word shapes and letter spacing. But current research indicates we actually decode letters individually, relying heavily on familiarity and context. This means with practice and good lighting, reading the Color Alphabet could become as natural as reading conventional text.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><em>(Below original handmade artist book based on the text \u201cRemarks on Color*\u201d by Ludwig Wittgenstein)&nbsp;<br>*Wittgenstein, Ludwig. Remarks on Colour, Trans. Linda L. McAlister, Margarete Sch\u00e4ttle. Berkeley: University of California Press, 1977.<br><\/em><br><a href=\"https:\/\/www.christianfaur.com\/fiber\/remarksOnColour\/remarksOnColour_Ex.pdf\">https:\/\/www.christianfaur.com\/fiber\/remarksOnColour\/remarksOnColour_Ex.pdf<\/a><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"331\" data-id=\"1501\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image1.jpg\" alt=\"\" class=\"wp-image-1501\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image1.jpg 540w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image1-300x184.jpg 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/MG_3968.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"498\" data-id=\"1505\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/MG_3968.jpg\" alt=\"\" class=\"wp-image-1505\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/MG_3968.jpg 622w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/MG_3968-300x240.jpg 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image3.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"360\" data-id=\"1506\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image3.jpg\" alt=\"\" class=\"wp-image-1506\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image3.jpg 540w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2025\/03\/image3-300x200.jpg 300w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Challenges with a Color-Based Language<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, there are practical considerations:<br>\u2022&nbsp;About 10% of males (and a small percentage of females) experience color blindness.<br>\u2022&nbsp;Colors often appear different based on surrounding colors, lighting conditions, or fading pigments over time.<br>\u2022&nbsp;Color memory isn\u2019t as strong as shape or symbol recognition.<br>\u2022&nbsp;It takes practice to \u201cread\u201d fluently in color.<br>\u2022&nbsp;Accurate color reproduction remains a challenge for many devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Despite these challenges, the Color Alphabet offers a fascinating, engaging way to merge visual art and written language.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Explore and Experiment<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Interested in trying it yourself? Explore the links below to download the Color Alphabet font or convert your text directly into color:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br>Please NOTE: colors will be WRONG when opening RTF outside of Acrobat, that because of differences in the RGB color settings for Word documents and RTF documents.  You will need to convert the RTF document into a PDF to get accurate colors. You can use Acrobat, Word or TextEdit on the Mac to export to PDF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2022&nbsp;<a href=\"http:\/\/www.christianfaur.com\/colorAlphabet.ttf.zip\"><strong>Download the Font\/Glyphs<\/strong><\/a><\/p>\n\n\n\n<!-- Color Alphabet Converter \u2013 original JS, CSS fully scoped -->\n<div class=\"cac-scope\">\n  <div class=\"wrap\">\n    <div class=\"card\">\n      <header>\n        <h1>Color Alphabet Converter \u2192 RTF (with optional embedded TTF)<\/h1>\n        <div class=\"small\">Paste text \u2192 choose font &#038; size \u2192 Export RTF. All in one file. \ud83d\udcab<\/div>\n      <\/header>\n      <div class=\"grid\">\n        <section class=\"panel\">\n          <h2>1) Input text<\/h2>\n          <textarea id=\"input\" placeholder=\"Paste or type your text here\u2026\"><\/textarea>\n          <div class=\"row\" style=\"margin-top:10px\">\n            <div>\n              <label class=\"hint\">Preview font size (pt)<\/label>\n              <input id=\"fontsize\" type=\"number\" min=\"6\" max=\"144\" step=\"1\" value=\"18\" \/>\n            <\/div>\n            <div>\n              <label class=\"hint\">RTF font name (exact)<\/label>\n              <input id=\"fontname\" type=\"text\" value=\"ColorAlphabetTT\" \/>\n            <\/div>\n          <\/div>\n          <div style=\"margin-top:10px\" class=\"btns\">\n            <button class=\"primary\" id=\"btnPreview\" type=\"button\">Update preview<\/button>\n            <button id=\"btnClear\" class=\"ghost\" type=\"button\">Clear<\/button>\n          <\/div>\n        <\/section>\n\n        <section class=\"panel\">\n          <h2>2) Optional: embed TTF into RTF<\/h2>\n          <div id=\"drop\" class=\"dropzone\">\n            <div>\n              <div><strong>Drop a .ttf file here<\/strong> or click to choose<\/div>\n              <div class=\"hint\">If provided, the exported RTF will try to embed this font (experimental; best in Word).<\/div>\n            <\/div>\n            <input id=\"file\" type=\"file\" accept=\".ttf\" style=\"display:none\" \/>\n          <\/div>\n          <div id=\"fontStatus\" class=\"hint\" style=\"margin-top:8px\">No font loaded.<\/div>\n          <div style=\"margin-top:12px\" class=\"hint\">Note: RTF font embedding is not uniformly supported by all editors. Microsoft Word usually works; Apple TextEdit may ignore embedded fonts and will fall back to a locally installed copy of the font name.<\/div>\n        <\/section>\n\n        <section class=\"panel\" style=\"grid-column: 1 \/ -1\">\n          <h2>3) Colorized preview<\/h2>\n          <div id=\"preview\" class=\"preview\"><\/div>\n          <div style=\"margin-top:10px\" class=\"btns\">\n            <button id=\"btnExport\" class=\"primary\" type=\"button\">Export RTF<\/button>\n            <button id=\"btnCopyRtf\" type=\"button\">Copy RTF to clipboard<\/button>\n            <button id=\"btnSample\" class=\"ghost\" type=\"button\">Load sample text<\/button>\n          <\/div>\n        <\/section>\n\n        <section class=\"panel\" style=\"grid-column: 1 \/ -1\">\n          <h2>Letter \u2192 Color map<\/h2>\n          <div id=\"map\" class=\"map\"><\/div>\n        <\/section>\n      <\/div>\n    <\/div>\n\n    <p class=\"hint\" style=\"margin-top:14px\">Tip: Shift+Enter makes a line break in many RTF editors. Tabs are preserved. Non-letters use the default color.<\/p>\n  <\/div>\n<\/div>\n\n<style>\n\/* ===== ONLY styles inside .cac-scope apply \u2014 nothing touches your theme ===== *\/\n.cac-scope { \n  \/* use CSS vars locally so descendants inherit within this block only *\/\n  --bg: #ffffff;\n  --panel: #f9f9fb;\n  --muted: #6b7280;\n  --text: #1f2937;\n  --accent: #2563eb;\n  --border: #d1d5db;\n\n  \/* bring in typography and \u201cbody\u201d styles ONLY to this container *\/\n  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;\n  color: var(--text);\n  background: radial-gradient(1200px 800px at 70% -10%, #f7f7fa 0%, var(--bg) 55%);\n  padding: 0 0 0 0;  \/* no outer layout changes *\/\n}\n\n\/* Layout and components, all scoped *\/\n.cac-scope .wrap { max-width: 1100px; margin: 48px auto; padding: 0 20px; }\n.cac-scope .card { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); overflow: hidden; }\n.cac-scope header { padding: 22px 24px; border-bottom: 1px solid var(--border); display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; }\n.cac-scope header h1 { font-size: clamp(18px, 2.2vw, 24px); margin: 0; letter-spacing: .2px; }\n.cac-scope header .small { color: var(--muted); font-size: 12px; }\n\n.cac-scope .grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; padding: 18px; }\n@media (max-width: 980px){ .cac-scope .grid{ grid-template-columns: 1fr; } }\n\n.cac-scope .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }\n.cac-scope .panel h2 { font-size: 14px; margin: 0 0 10px; color: var(--accent); letter-spacing:.3px; }\n\n.cac-scope textarea,\n.cac-scope input[type=\"text\"],\n.cac-scope input[type=\"number\"] {\n  width: 100%; box-sizing: border-box; background: #ffffff; color: var(--text);\n  border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 12px; font-size: 14px; outline: none;\n}\n.cac-scope textarea { min-height: 220px; resize: vertical; line-height: 1.5; }\n.cac-scope .row { display:flex; gap:10px; align-items:center; }\n.cac-scope .row > * { flex: 1; }\n\n.cac-scope .preview { min-height: 220px; background: #ffffff; border: 1px dashed #d1d5db; border-radius: 10px; padding: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }\n\n.cac-scope .btns { display:flex; flex-wrap: wrap; gap: 10px; }\n.cac-scope button { cursor: pointer; border: 1px solid #d1d5db; background: linear-gradient(180deg, #f9fafb, #e5e7eb); color: var(--text); padding: 10px 14px; border-radius: 10px; font-weight: 600; letter-spacing:.2px; }\n.cac-scope button.primary { background: linear-gradient(180deg, var(--accent), #1e40af); color: #ffffff; border: none; }\n.cac-scope button.ghost { background: transparent; }\n.cac-scope button:disabled { opacity:.6; cursor:not-allowed; }\n\n.cac-scope .map { display:grid; grid-template-columns: repeat(13, minmax(0,1fr)); gap: 6px; }\n.cac-scope .chip { border:1px solid var(--border); padding:8px 10px; border-radius: 8px; font-size: 12px; text-align:center; }\n.cac-scope .chip .swatch { display:block; height: 12px; border-radius: 6px; margin-bottom:6px; border:1px solid #00000020; }\n\n.cac-scope .hint { color: var(--muted); font-size: 12px; }\n.cac-scope .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; background:#f3f4f6; border:1px solid var(--border); padding:2px 6px; border-radius:6px; }\n\n.cac-scope .dropzone { border:1px dashed #cbd5e1; background:#f8fafc; color:#475569; border-radius:10px; padding:10px; display:flex; gap:10px; align-items:center; justify-content:center; text-align:center; min-height:64px; }\n.cac-scope .dropzone.hover { background:#e0f2fe; border-color:#38bdf8; }\n.cac-scope .fontname { font-weight:600; color:var(--accent); }\n<\/style>\n\n<script>\n  \/\/ --- ORIGINAL JS (unchanged) ---\n  const colorMap = {\n    'a': [0, 0, 180],'b': [175, 13, 102],'c': [146, 248, 70],'d': [255, 200, 47],\n    'e': [255, 118, 0],'f': [185, 185, 185],'g': [235, 235, 222],'h': [100, 100, 100],\n    'i': [255, 255, 0],'j': [55, 19, 112],'k': [255, 255, 150],'l': [202, 62, 94],\n    'm': [205, 145, 63],'n': [12, 75, 100],'o': [255, 0, 0],'p': [175, 155, 50],\n    'q': [0, 0, 0],'r': [37, 70, 25],'s': [121, 33, 135],'t': [83, 140, 208],\n    'u': [0, 154, 37],'v': [178, 220, 205],'w': [255, 152, 213],'x': [0, 0, 74],\n    'y': [175, 200, 74],'z': [63, 25, 12],\n  };\n  const letterOrder = 'abcdefghijklmnopqrstuvwxyz'.split('');\n\n  const inputEl = document.getElementById('input');\n  const previewEl = document.getElementById('preview');\n  const fontsizeEl = document.getElementById('fontsize');\n  const fontnameEl = document.getElementById('fontname');\n  const mapEl = document.getElementById('map');\n  const btnPreview = document.getElementById('btnPreview');\n  const btnExport = document.getElementById('btnExport');\n  const btnCopyRtf = document.getElementById('btnCopyRtf');\n  const btnClear = document.getElementById('btnClear');\n  const btnSample = document.getElementById('btnSample');\n\n  const drop = document.getElementById('drop');\n  const fileInput = document.getElementById('file');\n  const fontStatus = document.getElementById('fontStatus');\n\n  let loadedFontBytes = null;\n  let loadedFontBase64 = null;\n\n  function rgbToCss([r,g,b]){ return `rgb(${r}, ${g}, ${b})`; }\n\n  function renderMap(){\n    mapEl.innerHTML = '';\n    letterOrder.forEach(l => {\n      const rgb = colorMap[l];\n      const chip = document.createElement('div');\n      chip.className = 'chip';\n      chip.innerHTML = `<span class=\"swatch\" style=\"background:${rgbToCss(rgb)}\"><\/span><strong>${l.toUpperCase()}<\/strong><br><span class=\"hint\">${rgb.join(', ')}<\/span>`;\n      mapEl.appendChild(chip);\n    });\n  }\n\n  function escapeHtml(s){ return s.replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;'); }\n  function colorizeHtml(txt){\n    const fontSize = parseInt(fontsizeEl.value, 10) || 18;\n    const fontName = fontnameEl.value.trim() || 'ColorAlphabetTT';\n    previewEl.style.fontSize = fontSize + 'pt';\n    previewEl.style.fontFamily = `'${fontName}', ui-sans-serif, system-ui, -apple-system`;\n\n    let out = '';\n    for (const ch of txt){\n      if (ch === '\\n') { out += '\\n'; continue; }\n      if (ch === '\\t') { out += '\\t'; continue; }\n      const lower = ch.toLowerCase();\n      const rgb = colorMap[lower];\n      if (rgb){\n        out += `<span style=\"color:${rgbToCss(rgb)}\">${escapeHtml(ch)}<\/span>`;\n      } else {\n        out += escapeHtml(ch);\n      }\n    }\n    return out;\n  }\n\n  function updatePreview(){\n    previewEl.innerHTML = colorizeHtml(inputEl.value);\n    if (loadedFontBase64 && fontnameEl.value.trim()){\n      ensureFontFace(fontnameEl.value.trim(), loadedFontBase64);\n    }\n  }\n\n  function ensureFontFace(name, base64){\n    const id = 'ff-' + name.replace(\/\\W+\/g, '-');\n    if (document.getElementById(id)) return;\n    const style = document.createElement('style');\n    style.id = id;\n    style.textContent = `@font-face{ font-family: '${name}'; src: url(data:font\/ttf;base64,${base64}) format('truetype'); font-display: swap; }`;\n    document.head.appendChild(style);\n  }\n\n  function rtfEscapeChar(ch){\n    if (ch === '\\\\') return '\\\\\\\\';\n    if (ch === '{') return '\\\\{';\n    if (ch === '}') return '\\\\}';\n    const code = ch.codePointAt(0);\n    if (code > 126) { return `\\\\u${code}?`; }\n    return ch;\n  }\n\n  function buildColorTable(){\n    const entries = letterOrder.map(l => {\n      const [r,g,b] = colorMap[l];\n      return `\\\\red${r}\\\\green${g}\\\\blue${b};`;\n    }).join('');\n    return `{\\\\colortbl;${entries}}`;\n  }\n  function colorIndexForLetter(letter){ return letterOrder.indexOf(letter) + 1; }\n\n  function buildRtf(){\n    const fontName = (fontnameEl.value.trim() || 'ColorAlphabetTT').replace(\/[{}\\\\]\/g,'');\n    const fontSizePt = Math.max(6, Math.min(144, parseInt(fontsizeEl.value,10) || 18));\n    const fs = fontSizePt * 2;\n    const header = [\n      '{\\\\rtf1\\\\ansi\\\\deff0',\n      '{\\\\fonttbl{\\\\f0 \\\\fnil \\\\fcharset0 ' + fontName + ';}}',\n      buildColorTable(),\n      '\\\\viewkind4\\\\uc1\\\\pard\\\\f0',\n      '\\\\fs' + fs + ' '\n    ];\n\n    if (loadedFontBytes) {\n      header.push(buildEmbeddedFontBlock(fontName, loadedFontBytes));\n    }\n\n    const text = inputEl.value;\n    let body = '';\n    for (const ch of text){\n      if (ch === '\\n'){ body += '\\\\par\\n'; continue; }\n      if (ch === '\\t'){ body += '\\\\tab '; continue; }\n      const lower = ch.toLowerCase();\n      if (colorMap[lower]){\n        const idx = colorIndexForLetter(lower);\n        body += '{\\\\cf' + idx + ' ' + rtfEscapeChar(ch) + '}';\n      } else {\n        body += '{\\\\cf0 ' + rtfEscapeChar(ch) + '}';\n      }\n    }\n    return header.join('\\n') + body + '}';\n  }\n\n  function abToHex(ab){\n    const u8 = new Uint8Array(ab);\n    let hex = '';\n    for (let i=0;i<u8.length;i++){\n      hex += u8[i].toString(16).padStart(2,'0');\n      if ((i+1)%64===0) hex += '\\n';\n    }\n    return hex;\n  }\n  function buildEmbeddedFontBlock(fontName, fontBytes){\n    const hex = abToHex(fontBytes);\n    const safeName = fontName.replace(\/[{}\\\\]\/g,'');\n    return `\\n{\\\\*\\\\fontemb{\\\\*\\\\fonttype0}{\\\\*\\\\fontname ${safeName}}{\\\\*\\\\fontfile0 ${safeName}.ttf}{\\\\*\\\\data\\n${hex}\\n}}\\n`;\n  }\n\n  function download(filename, content){\n    const blob = new Blob([content], {type: 'application\/rtf'});\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url; a.download = filename;\n    document.body.appendChild(a); a.click();\n    setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 0);\n  }\n\n  document.getElementById('btnPreview').addEventListener('click', updatePreview);\n  document.getElementById('btnClear').addEventListener('click', () => { inputEl.value = ''; updatePreview(); });\n  document.getElementById('btnExport').addEventListener('click', () => { download('color-alphabet.rtf', buildRtf()); });\n  document.getElementById('btnCopyRtf').addEventListener('click', async () => {\n    const rtf = buildRtf();\n    try {\n      await navigator.clipboard.writeText(rtf);\n      const btn = document.getElementById('btnCopyRtf');\n      const old = btn.textContent; btn.textContent = 'Copied!';\n      setTimeout(()=> btn.textContent = old, 1000);\n    } catch(err){ alert('Clipboard not available. Export the RTF instead.'); }\n  });\n  document.getElementById('btnSample').addEventListener('click', () => {\n    inputEl.value = 'This is a sample showing every Letter from A to Z, a colorized RTF export.\\nPack my box with five dozen liquor jugs.';\n    updatePreview();\n  });\n\n  function setFontStatus(){\n    if (loadedFontBytes){\n      fontStatus.innerHTML = 'Loaded font \u2014 will attempt to embed into RTF and use for preview.';\n    } else {\n      fontStatus.textContent = 'No font loaded.';\n    }\n  }\n  drop.addEventListener('click', () => fileInput.click());\n  drop.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('hover'); });\n  drop.addEventListener('dragleave', () => drop.classList.remove('hover'));\n  drop.addEventListener('drop', e => {\n    e.preventDefault(); drop.classList.remove('hover');\n    const f = e.dataTransfer.files && e.dataTransfer.files[0];\n    if (f) handleFontFile(f);\n  });\n  fileInput.addEventListener('change', e => {\n    const f = e.target.files && e.target.files[0];\n    if (f) handleFontFile(f);\n  });\n  async function handleFontFile(file){\n    if (!\/\\.ttf$\/i.test(file.name)) { alert('Please provide a .ttf TrueType font.'); return; }\n    const ab = await file.arrayBuffer();\n    loadedFontBytes = ab;\n    loadedFontBase64 = await new Promise(res => {\n      const reader = new FileReader();\n      reader.onload = () => res(reader.result.split(',')[1]);\n      reader.readAsDataURL(new Blob([ab], {type:'font\/ttf'}));\n    });\n    ensureFontFace(fontnameEl.value.trim() || 'ColorAlphabetTT', loadedFontBase64);\n    setFontStatus();\n    updatePreview();\n  }\n\n  \/\/ Initial paint\n  renderMap();\n  updatePreview();\n<\/script>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-4 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"915\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2-150x150.jpg\" alt=\"\" class=\"wp-image-915\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2-150x150.jpg 150w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2-300x300.jpg 300w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2-1024x1024.jpg 1024w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2-768x768.jpg 768w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2-510x510.jpg 510w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/12\/blockColoralphabet-2.jpg 1222w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/07\/IMG_4312-e1532017771954.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"596\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/07\/IMG_4312-150x150.jpg\" alt=\"\" class=\"wp-image-596\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_4311-2.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"267\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_4311-2-150x150.jpg\" alt=\"\" class=\"wp-image-267\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_4311-2-150x150.jpg 150w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_4311-2-300x300.jpg 300w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_4311-2-768x768.jpg 768w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_4311-2-1024x1024.jpg 1024w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_4311-2-510x510.jpg 510w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><figcaption class=\"wp-element-caption\">Portrait Of God detail<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Jacket5-e1529328133975.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"319\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Jacket5-150x150.jpg\" alt=\"\" class=\"wp-image-319\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/11\/IMG_6210.jpeg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"833\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/11\/IMG_6210-150x150.jpeg\" alt=\"\" class=\"wp-image-833\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/11\/IMG_6210-150x150.jpeg 150w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2019\/11\/IMG_6210-510x510.jpeg 510w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"204\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186-150x150.jpg\" alt=\"\" class=\"wp-image-204\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186-150x150.jpg 150w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186-300x300.jpg 300w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186-768x768.jpg 768w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186-1024x1024.jpg 1024w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186-510x510.jpg 510w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9186.jpg 2000w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9191.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"201\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9191-150x150.jpg\" alt=\"\" class=\"wp-image-201\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9191-150x150.jpg 150w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9191-510x510.jpg 510w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9146.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"205\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9146-150x150.jpg\" alt=\"\" class=\"wp-image-205\" srcset=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9146-150x150.jpg 150w, https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/IMG_9146-510x510.jpg 510w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/TopBar_02.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"111\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/TopBar_02-150x150.jpg\" alt=\"\" class=\"wp-image-111\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Book2-e1529328029842.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"313\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Book2-150x150.jpg\" alt=\"\" class=\"wp-image-313\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Book3-e1529328054585.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"314\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Book3-150x150.jpg\" alt=\"\" class=\"wp-image-314\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-thumbnail\"><a href=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Book1-e1529327990190.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" data-id=\"312\" src=\"https:\/\/www.christianfaur.com\/NewSite\/wp-content\/uploads\/2018\/06\/Book1-150x150.jpg\" alt=\"\" class=\"wp-image-312\"\/><\/a><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Turning Letters into Colors to Create a Visual Language Color surrounds us daily, influencing emotions, guiding our decisions, and shaping the way we interpret the world. Colors can signal warnings\u2014like yellow caution signs or red stop lights\u2014and even represent deep cultural meanings. However, the meanings we assign to color often differ dramatically from one culture [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":598,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[12],"tags":[],"class_list":["post-1483","post","type-post","status-publish","format-standard","has-post-thumbnail","category-color-alphabet","czr-hentry"],"_links":{"self":[{"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/posts\/1483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/comments?post=1483"}],"version-history":[{"count":4,"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/posts\/1483\/revisions"}],"predecessor-version":[{"id":1577,"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/posts\/1483\/revisions\/1577"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/media\/598"}],"wp:attachment":[{"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/media?parent=1483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/categories?post=1483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.christianfaur.com\/NewSite\/wp-json\/wp\/v2\/tags?post=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}