# Codigrate Blog, full text > Every post on the Codigrate blog (https://codigrate.com/blog) in plain markdown, newest first: color theory, palette harmony, readability, and a color by color teardown of each Codigrate theme. The site index for agents is https://codigrate.com/llms.txt, and each post is also available alone at https://codigrate.com/blog/.md. # Anatomy of a Dark Theme: Vienna > Anatomy of Vienna, a dark IDE theme: crimson velvet and mahogany for the frame, imperial gold keywords, pastry cream strings and candlelit members. - URL: https://codigrate.com/blog/anatomy-of-the-vienna-theme - Published: 2026-10-14 - Category: Inspiration - Theme: [Vienna](https://codigrate.com/theme?product=vienna) - Publisher: Codigrate (https://codigrate.com) For generations, people who bought a standing place at the Vienna State Opera tied a scarf to the rail in front of them. It held the spot while they went to the cloakroom, and nobody touched it. The house still sells around 435 standing places for every performance, at roughly the price of a cinema ticket, and today each one comes with a numbered position, so the scarf is no longer needed. The building they stand in opened on 25 May 1869 with Don Giovanni, and its auditorium, rebuilt after the war, is still the one people picture when they think of Vienna at night: red velvet, gold leaf on every balcony, and the small lamps of the orchestra pit lighting the music on the stands. Codigrate's Vienna theme is that auditorium a few minutes before the curtain. What follows takes it apart color by color. It is the ninth city in this series after [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme), [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme), [Rio de Janeiro](https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme), [Tokyo](https://codigrate.com/blog/anatomy-of-the-tokyo-theme), [Tallinn](https://codigrate.com/blog/anatomy-of-the-tallinn-theme), [Prague](https://codigrate.com/blog/anatomy-of-the-prague-theme) and [Sydney](https://codigrate.com/blog/anatomy-of-the-sydney-theme), and the seventh premium theme after [Ocean](https://codigrate.com/blog/anatomy-of-the-ocean-theme), [Salda](https://codigrate.com/blog/anatomy-of-the-salda-theme), Prague, Sydney, [Reynisfjara](https://codigrate.com/blog/anatomy-of-the-reynisfjara-theme) and [Spring](https://codigrate.com/blog/anatomy-of-the-spring-theme). ## An Evening At The Opera The theme's own description sets the scene: a Viennese evening at the opera, from velvet seats and candlelit boxes to gilded balconies and the sheet music on the stands. The palette names follow the evening from the seats to the café afterwards. Crimson Parlor, Opera Velvet and Mahogany Night are the house. Muted Plum, Antique Rose and Vienna Rose are the upholstery and the light on it. Bronze Shadow, Gilded Frame, Imperial Gold and Candlelight are the balconies. Porcelain is the program in your hand. Pastry Cream, Marzipan and Black Coffee are what comes after the last act, and Palace Olive and Garden Sage are the gardens of the palaces you walk past on the way home. The interface takes its two accents from the boxes. Vienna Rose [#D7999F](https://codigrate.com/tools/color/D7999F) is the accent for links and changed settings, a rose that only shows its color against the dark red around it, and a dull brass [#AC956D](https://codigrate.com/tools/color/AC956D) is its second accent, the color the progress bar fills with. In the code the gold does most of the work: imperial gold [#DCA826](https://codigrate.com/tools/color/DCA826) for the keywords, pastry cream [#F4D8B3](https://codigrate.com/tools/color/F4D8B3) for the values and candlelight [#EACF8C](https://codigrate.com/tools/color/EACF8C) for everything that belongs to an object. ## The Harmony: Red Turning Into Gold On a wheel, Vienna is one warm arc. The frame starts it: every background, the interface text, the caret and the gutter sit between 352 and 360 degrees, the red of the velvet. The syntax picks up where the frame stops and walks around toward yellow. Local variables are a rose at 0 degrees, tags a coral at 16, parameters marzipan at 30, strings and numbers pastry cream at 34, attributes a pale gold at 39 and the keywords, fields and methods imperial gold and candlelight at 43. That is an [analogous harmony](https://codigrate.com/blog/introduction-to-color-harmony), neighbors on the wheel, and here it reads as one material catching the light: crimson in the shadow, gold where the lamp hits. The [warm](https://codigrate.com/blog/warm-and-cool-colors) arc is not the whole palette. Three notes step off it on purpose. Static members and globals take two quiet palace greens near 80 degrees, garden sage and palace olive, low in [saturation](https://codigrate.com/blog/saturation) so they sit back rather than shout. Annotations take a lavender [#B8A6D6](https://codigrate.com/tools/color/B8A6D6) at 262, the one cool color in the code itself. And class names, function names and constants are left a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0) with no hue at all, the white of the sheet music between the golds. The golds are saturated, most of them between 68 and 82 percent, but they are also light, between 70 and 83 percent lightness. That combination is why they glow without burning. Fully saturated gold at a middle lightness would look like brass paint; lifted this far, it looks like gilt under warm light. ## Backgrounds, From The Stalls To The Ceiling Vienna's backgrounds are four surfaces, and the further from the code, the redder and lighter they get: - Input [#0B0909](https://codigrate.com/tools/color/0B0909), black coffee, for search fields and dialogs. - Editor [#2C1D1D](https://codigrate.com/tools/color/2C1D1D), mahogany night, the page the code is written on. - Window [#4B2226](https://codigrate.com/tools/color/4B2226), opera velvet, for the tool windows and panels. - Surface [#6A2F34](https://codigrate.com/tools/color/6A2F34), crimson parlor, the outer frame the whole window sits in. The editor is the darkest wood in the house, a brown red at about 14 percent lightness and 21 percent saturation, calm enough to read on for hours. The panels and the frame almost double that saturation, to about 38 percent, which is where the theme becomes red rather than brown. Sitting in the editor, you look out at the velvet the way you look from the stalls up at the boxes. Below everything is the input, nearly black, so a field waiting for you to type has an unmistakable shape in the red. Hovering a row darkens it to [#351D20](https://codigrate.com/tools/color/351D20), and a selected row in the project tree lifts to a rose velvet [#663337](https://codigrate.com/tools/color/663337) edged in [#B07479](https://codigrate.com/tools/color/B07479). Gold appears wherever the window points at something. The active editor tab sits on bronze shadow [#463921](https://codigrate.com/tools/color/463921) with an old gold underline [#AC9368](https://codigrate.com/tools/color/AC9368), search matches in the interface glow gilded frame [#C0A371](https://codigrate.com/tools/color/C0A371), and selected text in the editor turns a dark gilt [#615532](https://codigrate.com/tools/color/615532), the one background that leaves the red family entirely. The text stays readable on it at about 6.2:1. Search results in the code turn to the garden: a pale sage [#CAD8AF](https://codigrate.com/tools/color/CAD8AF) on a dark olive [#353C2A](https://codigrate.com/tools/color/353C2A) edged in [#ABB890](https://codigrate.com/tools/color/ABB890). And the word under the caret is the coolest mark in the theme, a Danube blue [#A3B2E4](https://codigrate.com/tools/color/A3B2E4) on [#292E43](https://codigrate.com/tools/color/292E43) where it is read and a violet [#D2A3E4](https://codigrate.com/tools/color/D2A3E4) on [#322039](https://codigrate.com/tools/color/322039) where it is written to, so it never blends into the golds around it. ## One Foreground, Several Voices Code is written in a warm off white [#F1EAEA](https://codigrate.com/tools/color/F1EAEA) at about 13.6:1 against the mahogany, close to the color of an old opera program rather than a bright screen white. The interface around it uses porcelain [#E6D7D8](https://codigrate.com/tools/color/E6D7D8) at about 9.7:1 on the velvet panels, and one level down an antique rose [#C0989C](https://codigrate.com/tools/color/C0989C) for hints and secondary labels at about 5.3:1. Comments are where Vienna is most generous. They are a warm taupe [#B6A498](https://codigrate.com/tools/color/B6A498), the color of the ruled lines on a sheet of music, at about 6.7:1, well above the 4.5:1 the [readability post](https://codigrate.com/blog/introduction-to-readability) suggests for body text. On a background this dark a comment can be that strong without competing with the code, because the code around it is brighter and warmer still. Line comments and doc comments are set in italics, the tags inside doc comments are bold in the same taupe, and block comments stay upright, so a commented out chunk of code reads as code put aside rather than as prose. The gutter is the edge of the stage. It sits on a slightly lighter wood [#352222](https://codigrate.com/tools/color/352222), line numbers are a dusty rose [#B38489](https://codigrate.com/tools/color/B38489) at about 5.1:1, and the number on the current line warms to [#DFA5AC](https://codigrate.com/tools/color/DFA5AC). The caret is a rose [#BC8488](https://codigrate.com/tools/color/BC8488) over a muted plum current row [#543738](https://codigrate.com/tools/color/543738). Indent guides are drawn in deep velvet [#532B2E](https://codigrate.com/tools/color/532B2E) and the guide of the block you are in lifts to [#783D41](https://codigrate.com/tools/color/783D41), and a matched brace is marked in bold on a worn brass [#937A5A](https://codigrate.com/tools/color/937A5A). ## Syntax: Gold Leaf, Cream And Rose Open a file and the house lights come up: - Keywords in imperial gold [#DCA826](https://codigrate.com/tools/color/DCA826), the gold leaf on the balconies, the strongest color in a file and the first thing you see. - Strings, numbers and escapes in pastry cream [#F4D8B3](https://codigrate.com/tools/color/F4D8B3), pale enough that values read as part of the page. - Instance fields and methods in candlelight [#EACF8C](https://codigrate.com/tools/color/EACF8C), and JavaScript member functions in a brighter honey [#EDCB77](https://codigrate.com/tools/color/EDCB77). - Parameters in marzipan [#ECC39A](https://codigrate.com/tools/color/ECC39A), and local variables in a dusty rose [#CE8F8F](https://codigrate.com/tools/color/CE8F8F), the velvet of the seats carried into the code. - Static fields and methods in garden sage [#B6C39C](https://codigrate.com/tools/color/B6C39C), set in italics, and global variables in palace olive [#98A67D](https://codigrate.com/tools/color/98A67D). - Annotations in lavender [#B8A6D6](https://codigrate.com/tools/color/B8A6D6), the one cool note. - HTML and XML tags in a coral [#E8997C](https://codigrate.com/tools/color/E8997C), and attributes in a pale gold [#F3CD86](https://codigrate.com/tools/color/F3CD86). - Class names, function names, constants and inline hints in a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0). With the names left grey, a Vienna file reads like a score. The light grey names and the warm white text are the notes, the gold marks the structure the way bar lines and dynamics do, and the rose and marzipan pick out the parts that change from call to call, the variables and the arguments passed in. ## The Final Product Here is Vienna put back together. The crimson frame holds a JetBrains IDE and Sublime Text, Slack and Ghostty carry the same velvet around the chat and the shell, and in Rhino the viewports go dark mahogany with gold marking the active tab.
Vienna theme in a JetBrains IDE
JetBrains
Vienna theme in Sublime Text
Sublime Text
Vienna theme in Slack
Slack
Vienna theme in Ghostty
Ghostty
Vienna theme in Rhino
Rhino
## Reading It Back Taken apart, Vienna is a single material seen in two lights. The backgrounds are the velvet and the wood of the house, redder and lighter the further they are from the code, with one nearly black slot for whatever you are about to type. The syntax is the gilt on the balconies, one warm arc from rose to gold, and the few colors that leave it are there to be found: the garden greens of static members and search results, a lavender for annotations, and the blue and violet on the word under the caret. It is a theme for late work in a dim room, warm without being sleepy and rich without getting in the way. Vienna is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Xcode, Zed, Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=vienna). ## Frequently Asked Questions ### What is the Vienna theme? Vienna is one of Codigrate's premium dark city themes, built around an evening at the opera: velvet seats, candlelit boxes, gilded balconies and the sheet music on the stands. The frame of the editor is the auditorium, crimson and opera velvet reds, and the code is written on a dark mahogany. The syntax is the gold of the house: imperial gold keywords, pastry cream strings and numbers, candlelight fields and methods and marzipan parameters, with a few palace garden greens and one lavender for annotations. ### Why are the search fields in Vienna darker than the editor? Because they are the one place you type something new. The editor sits on mahogany #2C1D1D, the panels on opera velvet #4B2226 and the outer frame on crimson #6A2F34, so the backgrounds get redder and lighter the further they are from the code. Search fields and dialog inputs drop below all of them to a black coffee #0B0909, almost black. A field you are about to type into reads as an open slot in the red, and it is impossible to mistake for a panel or a label. ### How are the syntax colors chosen in Vienna? Almost all of them sit on one warm stretch of the color wheel, from the rose of local variables at 0 degrees through coral tags at 16, marzipan parameters at 30 and pastry cream strings at 34, to the golds of keywords, fields and attributes between 39 and 43. That is an analogous harmony, the reds of the frame turning slowly into gold. Two palace garden greens near 80 degrees take static members and globals, a lavender at 262 marks annotations, and plain light grey is kept for class, function and constant names. ### Where can I get the Vienna theme? Vienna is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Xcode, Zed, Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the Vienna theme page. --- # Anatomy of a Light Theme: Spring > Anatomy of Spring, a light IDE theme: mint air and new grass for the frame, foxglove keywords, crocus violet values and fern green members, a tulip bed in code. - URL: https://codigrate.com/blog/anatomy-of-the-spring-theme - Published: 2026-10-13 - Category: Inspiration - Theme: [Spring](https://codigrate.com/theme?product=spring) - Publisher: Codigrate (https://codigrate.com) Tulips open and close by themselves. On a warm morning the petals spread wide, and when the air cools in the evening they fold back into a cup. Nothing is pulling them. The inner face of each petal grows a little faster when it is warm and the outer face grows a little faster when it is cool, so the petal bends one way in the sun and the other way at night. Crocus flowers do the same, which is why a lawn full of crocus looks closed and grey on a cold April morning and bright purple an hour later. A garden in spring is moving all day, just slowly enough that you only notice it when you come back. Codigrate's Spring theme is that garden late in the morning, when the beds are open, the grass is new and the sky is clear. What follows takes it apart color by color. It is the tenth nature theme in this series after [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme), [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme), [Sequoia](https://codigrate.com/blog/anatomy-of-the-sequoia-theme), [Autumn](https://codigrate.com/blog/anatomy-of-the-autumn-theme), [Roraima](https://codigrate.com/blog/anatomy-of-the-roraima-theme), [Sakura](https://codigrate.com/blog/anatomy-of-the-sakura-theme), [Ocean](https://codigrate.com/blog/anatomy-of-the-ocean-theme), [Salda](https://codigrate.com/blog/anatomy-of-the-salda-theme) and [Reynisfjara](https://codigrate.com/blog/anatomy-of-the-reynisfjara-theme), and the sixth premium theme after Ocean, Salda, [Prague](https://codigrate.com/blog/anatomy-of-the-prague-theme), [Sydney](https://codigrate.com/blog/anatomy-of-the-sydney-theme) and Reynisfjara. Sakura is spring too, but one tree in bloom, pale petals and deep rose; Spring is the whole bed, with the grass around it. ## A Garden In April The theme's own description sets the scene: a spring garden in full bloom, from tulip beds and crocus to the first new grass under a clear sky. The palette names walk through it. Daisy White, Mint Air and New Grass are the light and the lawn. Garden Hedge, Clover Green, Fern Frond, Deep Meadow, Shaded Leaf, Dark Moss and Dusty Sage are the leaves, from the first shoot to the shade under the hedge. Robin Egg, Cornflower, Clear Sky and Deep Sky are the blues. Crocus Violet, Lilac Bloom, Rosebud, Foxglove and Tulip Red are the flowers, and Sprout Green and Dandelion keep the small signals of the interface. The interface leans on the two halves of the garden. A deep meadow green [#356220](https://codigrate.com/tools/color/356220) is the accent for links and changed settings, and a rosebud pink [#DC8395](https://codigrate.com/tools/color/DC8395) is its second accent, the color the progress bar fills with. In the code the same split runs through every line: foxglove [#BA6173](https://codigrate.com/tools/color/BA6173) and crocus violet [#8C68AC](https://codigrate.com/tools/color/8C68AC) for the flowers, fern frond [#3C8F63](https://codigrate.com/tools/color/3C8F63) and clover [#55956B](https://codigrate.com/tools/color/55956B) for the leaves. ## The Harmony: Flowers Across The Grass On a wheel, Spring is the oldest trick in a garden: flowers set against their own leaves. The greens gather between 91 and 148 degrees: every background, the frame, the interface text, the caret, and in the code the fields, methods, static members, annotations, tags and globals. Straight across the wheel from them sit the flowers that matter most: the foxglove keywords at 348 degrees and a rose for attributes at 0. What keeps it from being a plain [complementary](https://codigrate.com/blog/harmony-in-opposites) pair is that the flowers do not stop there. The bed spreads around the far side of the wheel. Crocus violet at 272 carries the strings and numbers, cornflower at 213 the local variables and robin egg at 195 the parameters. So the green half stays whole and the other half is planted with every flower the garden has, the way a real border mixes tulips, crocus and forget me nots against one hedge. The flowers are not loud. Almost every color in the code sits between 27 and 41 percent [saturation](https://codigrate.com/blog/saturation), soft enough for a light page, and the only exception is a leaf: the sprout green of annotations at about 60 percent, the brightest green on the screen, like the first shoot through the soil. ## Backgrounds, From Lawn To Petal Spring's backgrounds are four light surfaces, and the further from the code, the greener they get: - Input [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), daisy white, for search fields and dialogs. - Editor [#FAFFF9](https://codigrate.com/tools/color/FAFFF9), the page the code is written on, a near white with a breath of green. - Window [#F4FFF1](https://codigrate.com/tools/color/F4FFF1), mint air, for the tool windows and panels. - Surface [#C8EAB9](https://codigrate.com/tools/color/C8EAB9), new grass, the outer frame the whole window sits in. The first three are so pale that they read as white; the frame is the only real color, a green at about 54 percent saturation and 82 percent lightness. That is the opposite of how most light themes work, where the frame is a neutral grey and any color lives in the code. Here the lawn goes around the edge and the page stays clean, so the eye always lands on the code first. A selected row in the project tree takes a light leaf [#D9F1CD](https://codigrate.com/tools/color/D9F1CD) edged in garden hedge [#7BA566](https://codigrate.com/tools/color/7BA566), and hovering over a row lights it the same pale green. The flowers come in where the window tells you something. The active editor tab sits on a lilac [#F4EEFB](https://codigrate.com/tools/color/F4EEFB) with a crocus underline [#B196D3](https://codigrate.com/tools/color/B196D3), and search matches in the interface glow lilac bloom [#D5B3F4](https://codigrate.com/tools/color/D5B3F4). Selected text in the editor turns the pink of a tulip petal held up to the light, [#F4E1E7](https://codigrate.com/tools/color/F4E1E7), the one pink in the backgrounds. Search results in the code are a foxglove magenta [#A62C96](https://codigrate.com/tools/color/A62C96) on a pale pink [#FBEBF9](https://codigrate.com/tools/color/FBEBF9) edged in [#631259](https://codigrate.com/tools/color/631259). And the word under the caret is marked by the sky where it is read, a deep teal [#054F5C](https://codigrate.com/tools/color/054F5C) on a pale blue [#D5F1F6](https://codigrate.com/tools/color/D5F1F6), and by a rose where it is written to, a deep wine [#590325](https://codigrate.com/tools/color/590325) on [#F8DAE6](https://codigrate.com/tools/color/F8DAE6). ## One Foreground, Several Voices Code is written in a dark moss green [#142010](https://codigrate.com/tools/color/142010) at about 16.7:1 against the editor, so dark that it reads as black until you set it next to real black. Class names, function names and constants keep a deep evergreen [#102020](https://codigrate.com/tools/color/102020) at the same strength. The interface around it uses dark moss [#122C07](https://codigrate.com/tools/color/122C07), and one level down a shaded leaf [#49613F](https://codigrate.com/tools/color/49613F) for hints and secondary labels at about 6.8:1. Comments are a dry grass olive [#919063](https://codigrate.com/tools/color/919063), set in italics, at about 3.3:1. That is quieter than the 4.5:1 the [readability post](https://codigrate.com/blog/introduction-to-readability) suggests for body text, and it is on purpose: on a light page a comment in the same weight as the code competes with it, so Spring lets the notes fade back like last year's straw under the new grass. They stay readable when you look for them and out of the way when you do not. The gutter is the hedge. Line numbers are a soft leaf green [#88B374](https://codigrate.com/tools/color/88B374), light enough to sit in the margin without drawing the eye, the number on the current line deepens to a sprout green [#4FA42A](https://codigrate.com/tools/color/4FA42A), and the caret is a garden green [#62954B](https://codigrate.com/tools/color/62954B) over a pale green current row [#E6F8DA](https://codigrate.com/tools/color/E6F8DA). ## Syntax: Tulips, Crocus And Clover Open a file and the bed fills in: - Keywords in bold foxglove [#BA6173](https://codigrate.com/tools/color/BA6173), the flower that marks every block, the first thing you see in a file. - Strings, numbers and escapes in crocus violet [#8C68AC](https://codigrate.com/tools/color/8C68AC). - Local variables in cornflower [#527FB6](https://codigrate.com/tools/color/527FB6), and parameters in a lighter robin egg [#5E9AAE](https://codigrate.com/tools/color/5E9AAE), the two blues of the sky over the garden. - Instance fields and methods in fern frond [#3C8F63](https://codigrate.com/tools/color/3C8F63), and JavaScript member functions in a deeper evergreen [#156E3F](https://codigrate.com/tools/color/156E3F). - Static fields and methods in a younger leaf green [#6F934E](https://codigrate.com/tools/color/6F934E), warmer than the fern. - Annotations in sprout green [#4D9A27](https://codigrate.com/tools/color/4D9A27), the brightest green in the code. - HTML and XML tags in clover [#55956B](https://codigrate.com/tools/color/55956B), and attributes in a rose [#BD7070](https://codigrate.com/tools/color/BD7070), a flower on every stem. - Global variables in a dusty sage [#688776](https://codigrate.com/tools/color/688776), the quietest green, and inline hints in a plain grey [#545454](https://codigrate.com/tools/color/545454). With the names left a deep green, a Spring file reads like a bed seen from the path. The leaves are the structure, everything that belongs to an object, and the flowers come up where the code makes a decision or brings something in: a keyword, a value, a variable. ## The Final Product Here is Spring put back together. The new grass frames a JetBrains IDE and Sublime Text, Slack and Ghostty keep the same mint light around the chat and the shell, and in Rhino the viewports turn the pale green of a spring morning, with foxglove marking the active tab.
Spring theme in a JetBrains IDE
JetBrains
Spring theme in Sublime Text
Sublime Text
Spring theme in Slack
Slack
Spring theme in Ghostty
Ghostty
Spring theme in Rhino
Rhino
## Reading It Back Taken apart, Spring is a garden held in two halves. The frame is the lawn, the only real green in the backgrounds, and the page inside it stays almost white so the code always comes first. The leaves of the garden take the structure of a file, the flowers take the moments that matter, and the brightest marks are kept for the things you are looking for: the lilac of a match, the petal pink of a selection and the sky blue on the word under the caret. It is a theme for bright rooms and morning work, light without being glaring and green without being loud. Spring is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=spring). ## Frequently Asked Questions ### What is the Spring theme? Spring is one of Codigrate's premium light nature themes, built around a garden in April: tulip beds, crocus in the grass and the first new leaves under a clear sky. The frame of the editor is the lawn, a soft new grass green, and the code is written on an almost white page with a breath of green in it. The flowers carry the syntax: foxglove pink keywords, crocus violet strings and numbers, cornflower and robin egg blue variables, with the leaves of the garden in fern and clover greens for everything that belongs to an object. ### Why is the frame of Spring green? Because a garden is. Most light themes keep their frame a pale grey or a near white, and Spring keeps its editor that way too. Only the outer frame, the strip the whole window sits in, is a real green: new grass at about 54 percent saturation. It frames the page the way a lawn frames a flower bed, and it means the code area is the lightest and calmest place on the screen, with the color around it rather than under it. ### How are the syntax colors chosen in Spring? They split the garden into leaves and flowers. The leaves sit together on the green side of the wheel, between 91 and 148 degrees: fern green fields and methods, a younger leaf green for static members, sprout green annotations, clover tags and a sage for globals. The flowers sit across the wheel from them: foxglove keywords at 348 degrees, a rose for attributes, crocus violet values at 272, and the two blues of the sky, cornflower local variables and robin egg parameters. Keywords are set in bold, so the structure of a file stands out first. ### Where can I get the Spring theme? Spring is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the Spring theme page. --- # Anatomy of a Dark Theme: Reynisfjara > Anatomy of Reynisfjara, a dark IDE theme: black sand and basalt greys for the frame, washed timber keywords and sea foam values, quiet as a beach at dusk. - URL: https://codigrate.com/blog/anatomy-of-the-reynisfjara-theme - Published: 2026-10-11 - Category: Inspiration - Theme: [Reynisfjara](https://codigrate.com/theme?product=reynisfjara) - Publisher: Codigrate (https://codigrate.com) The columns at the foot of Reynisfjall look carved, but nobody cut them. They are lava that cooled. A thick sheet of basalt shrinks as it loses its heat, and the shrinking pulls the rock apart into cracks that meet at about 120 degrees, the same way a puddle of mud splits into tiles as it dries. Seen from above the cracks make a field of mostly six sided polygons, and as the cooling front moves down through the rock it carries the pattern with it, so each tile grows into a long stone column. The black sand under them comes from the same lava, broken down by the North Atlantic, and the sea stacks of Reynisdrangar standing off the shore are basalt too. The local story says they are trolls who were dragging a ship to land and were caught by the dawn. Codigrate's Reynisfjara theme is that beach at dusk, when the sand and the sky are nearly the same grey and the only warm thing in sight is the driftwood. What follows takes it apart color by color. It is the ninth nature theme in this series after [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme), [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme), [Sequoia](https://codigrate.com/blog/anatomy-of-the-sequoia-theme), [Autumn](https://codigrate.com/blog/anatomy-of-the-autumn-theme), [Roraima](https://codigrate.com/blog/anatomy-of-the-roraima-theme), [Sakura](https://codigrate.com/blog/anatomy-of-the-sakura-theme), [Ocean](https://codigrate.com/blog/anatomy-of-the-ocean-theme) and [Salda](https://codigrate.com/blog/anatomy-of-the-salda-theme), and the fifth premium theme after Ocean, Salda, [Prague](https://codigrate.com/blog/anatomy-of-the-prague-theme) and [Sydney](https://codigrate.com/blog/anatomy-of-the-sydney-theme). Ocean also lives by the sea, but under it, in teal and coral; Reynisfjara stays on the shore, where the water is grey. ## A Beach At Dusk The theme's own description sets the scene: the windswept shore of Reynisfjara, deep charcoal surfaces with cool steel blue tones and soft grey blue accents. The palette names walk down the beach. Sea Cave, Black Sand, Basalt Column, Dark Shore and Weathered Basalt are the stone. Gull Grey, Overcast, North Wave, Sea Foam and Sea Spray are the sky and the surf. Wet Sand, Bleached Sand, Driftwood, Pale Driftwood, Washed Timber and Beach Pebble are what the tide leaves behind. A Cold Horizon blue, a Moss Rock green, a Winter Sun gold and an Iron Red keep the small signals of the interface. The interface leans on the two halves of the shore. A north wave blue grey [#9FA9B9](https://codigrate.com/tools/color/9FA9B9) is the accent for links and the marks that need to stand out, and a beach pebble [#8E8276](https://codigrate.com/tools/color/8E8276) is its second accent. In the code the same split runs through every line: washed timber [#AC8563](https://codigrate.com/tools/color/AC8563) and bleached sand [#C3B9AD](https://codigrate.com/tools/color/C3B9AD) for the land, sea foam [#AEB8C5](https://codigrate.com/tools/color/AEB8C5) and cold horizon [#99C0D3](https://codigrate.com/tools/color/99C0D3) for the water. ## The Harmony: Driftwood Against The North Atlantic On a wheel, Reynisfjara is a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair, and the same pair as Prague. The cool colors gather between 200 and 217 degrees: every background, the interface text, the caret, the strings and the parameters. The warm colors sit straight across, between 28 and 46 degrees: the keywords at 28, the local variables at 29, the fields and methods at 33, the static members at 43 and the tags at 46. What makes it a different theme is how little color there is on either side. Prague burns its lamps at full strength; Reynisfjara keeps every color in the code at or under about 40 percent [saturation](https://codigrate.com/blog/saturation), and most of them between 12 and 32, so the beach reads grey at a glance and the warmth only shows up when you look for it. The roles are swapped too. In Prague the language is blue and the members are warm; here the keywords are the driftwood and the values are the sea. Three colors step off the axis on purpose. Attributes are a moss green at 114, the grass that grows on the cliffs above the beach. Global variables are a lichen at 63, between the moss and the sand. Annotations are a rosy sand at 9, the color the wet sand takes for a few minutes when the low sun catches it. None of them is louder than the rest; they are there so the shore has a little life on it. ## Backgrounds, Down To The Sand Reynisfjara's backgrounds are four near blacks on one cool hue, near 213 degrees: - Input [#060709](https://codigrate.com/tools/color/060709), sea cave, the darkest well, where you type into search fields and dialogs. - Editor [#151A20](https://codigrate.com/tools/color/151A20), black sand, the beach the code is written on. - Window [#20262C](https://codigrate.com/tools/color/20262C), basalt column, for the tool windows and panels. - Surface [#2A3138](https://codigrate.com/tools/color/2A3138), dark shore, the outer frame the whole window sits in. Here the steps run the other way from Prague. There, the higher the panel, the more blue it holds. Here, the higher the panel, the less: the editor sits at about 21 percent saturation, the windows at 16 and the frame at 14. So the code rests on the one surface with a trace of the sea in it, and the panels around it turn to plain stone, the way wet sand holds the color of the sky and the dry rock behind it does not. A selected row in the project tree stays in that stone, a cooler grey [#333A45](https://codigrate.com/tools/color/333A45) edged in gull grey [#7D848D](https://codigrate.com/tools/color/7D848D). The warm marks are where the window tells you something. The active editor tab sits on wet sand [#3E3B37](https://codigrate.com/tools/color/3E3B37) with a driftwood underline [#A7A197](https://codigrate.com/tools/color/A7A197), and the progress bar runs in beach pebble [#8E8276](https://codigrate.com/tools/color/8E8276). Selected text in the editor turns a dusky rose [#3E2E35](https://codigrate.com/tools/color/3E2E35), the one moment of sunset in the theme. Search matches go to twilight instead, a pale lilac [#D4D4E1](https://codigrate.com/tools/color/D4D4E1) on a deep violet [#2C2C45](https://codigrate.com/tools/color/2C2C45) edged in [#7F7FC1](https://codigrate.com/tools/color/7F7FC1), so they never get confused with a selection. And the word under the caret glows like a fire on the beach: where it is read, a warm cream [#FDE8CE](https://codigrate.com/tools/color/FDE8CE) on driftwood brown [#534539](https://codigrate.com/tools/color/534539), and where it is written to, a little more yellow, [#FDF0CE](https://codigrate.com/tools/color/FDF0CE) on [#534E39](https://codigrate.com/tools/color/534E39). ## One Foreground, Several Voices Code is written in a near white [#E0E1E3](https://codigrate.com/tools/color/E0E1E3) at about 13:1 against the editor, and class names, function names and constants stay a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0) at the same strength. The interface around it uses sea foam [#AEB6C0](https://codigrate.com/tools/color/AEB6C0), and one level down an overcast [#8B95A2](https://codigrate.com/tools/color/8B95A2) for hints and secondary labels, both on the same cool hue as the sand. Comments are a stone grey with the faintest trace of mauve, [#8C838C](https://codigrate.com/tools/color/8C838C), set in italics, at about 4.8:1. It is the one color in the theme that belongs to neither side of the beach, which is exactly what a note should do: it stays readable, as the [readability post](https://codigrate.com/blog/introduction-to-readability) asks, and steps out of the way of the code. The gutter is the evening sky. Line numbers are a dusk blue [#7894B0](https://codigrate.com/tools/color/7894B0) at about 5.5:1, the number on the current line brightens to a pale sky [#B9DAFA](https://codigrate.com/tools/color/B9DAFA), and the caret is a cool silver [#BDCADE](https://codigrate.com/tools/color/BDCADE) over a slightly lighter current row [#303A43](https://codigrate.com/tools/color/303A43). ## Syntax: Timber, Foam And Moss Open a file and the beach fills in: - Keywords in washed timber [#AC8563](https://codigrate.com/tools/color/AC8563), the warmest and most common colored words in any file, like the driftwood scattered along the tide line. - Strings, numbers and escapes in sea foam [#AEB8C5](https://codigrate.com/tools/color/AEB8C5), a pale grey blue. - Parameters in cold horizon [#99C0D3](https://codigrate.com/tools/color/99C0D3), the most saturated color in the code, the strip of light over the sea. - Instance fields and methods in bleached sand [#C3B9AD](https://codigrate.com/tools/color/C3B9AD), and JavaScript member functions in a lighter sand [#D1CCC4](https://codigrate.com/tools/color/D1CCC4). - Static fields and methods in an italic beach pebble [#98907B](https://codigrate.com/tools/color/98907B), duller and heavier than the sand around it. - Local variables in pale driftwood [#C5A98F](https://codigrate.com/tools/color/C5A98F), a lighter cousin of the keywords. - HTML and XML tags in a driftwood grey [#B1AC9B](https://codigrate.com/tools/color/B1AC9B), and attributes in moss [#91AC8E](https://codigrate.com/tools/color/91AC8E). - Global variables in lichen [#BBBD95](https://codigrate.com/tools/color/BBBD95), and annotations in a rosy sand [#C6AFAB](https://codigrate.com/tools/color/C6AFAB). With the names left a plain grey, a Reynisfjara file reads as a walk along the tide line. Most of what you see is sand and timber, the structure and the things that belong to objects, and the sea shows up only where a value comes in from outside: a string, a number, a parameter. ## The Final Product Here is Reynisfjara put back together. The black sand fills a JetBrains IDE and Sublime Text, Slack and Ghostty keep the same basalt dark around the chat and the shell, and in Rhino the viewports turn the grey of the beach at dusk, with driftwood marking the active tab.
Reynisfjara theme in a JetBrains IDE
JetBrains
Reynisfjara theme in Sublime Text
Sublime Text
Reynisfjara theme in Slack
Slack
Reynisfjara theme in Ghostty
Ghostty
Reynisfjara theme in Rhino
Rhino
## Reading It Back Taken apart, Reynisfjara is a beach in two halves held almost still. The backgrounds, the gutter and the interface are one cool grey, a trace of the sea in the editor and plain stone around it. The code splits between the driftwood and the surf, but at so low a saturation that the page reads as one quiet grey until you look closer. The few brighter marks are the ones that tell you something: the dusky rose of a selection, the violet of a search match and the warm glow on the word under the caret. It is a theme for long, quiet sessions, the kind of evening light that is easy on the eyes and never asks for attention. Reynisfjara is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=reynisfjara). ## Frequently Asked Questions ### What is the Reynisfjara theme? Reynisfjara is one of Codigrate's premium dark nature themes, built around the black sand beach on the south coast of Iceland at dusk: basalt columns, sea stacks standing in the surf and driftwood on wet sand. The frame of the editor is the sand and the stone, four dark greys on one cool hue. The code is split between the shore and the sea: the keywords, members and local variables in driftwood and timber browns, the values and parameters in sea foam and a cold horizon blue. ### Why are the colors in Reynisfjara so muted? Because the beach is. Reynisfjara is black sand under a grey sky, and almost nothing on it is a strong color. The theme keeps that: no color in the code goes above about 40 percent saturation, and most stay between 12 and 32. The difference between one kind of token and another is carried by the side of the color wheel it sits on, warm sand or cold sea, and by lightness, rather than by brightness. That makes it one of the calmest themes in the series for long sessions. ### How are the syntax colors chosen in Reynisfjara? They sit on two sides of the wheel, like Prague's, but with the roles swapped. The warm side, between 28 and 46 degrees, is the driftwood: washed timber keywords, bleached sand fields and methods, pale driftwood local variables, a driftwood grey for tags and an italic pebble for static members. The cool side, near 200 to 214 degrees, is the sea: sea foam strings and numbers, and a cold horizon blue for parameters, the most saturated color in the code. Moss for attributes, lichen for globals and a rosy sand for annotations sit just off that line. ### Where can I get the Reynisfjara theme? Reynisfjara is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the Reynisfjara theme page. --- # Anatomy of a Light Theme: Sydney > Anatomy of Sydney, a light IDE theme: two whites and a harbour blue frame, reef teal and harbour blue code, warmed by sandstone clay and outback gold. - URL: https://codigrate.com/blog/anatomy-of-the-sydney-theme - Published: 2026-10-10 - Category: Inspiration - Theme: [Sydney](https://codigrate.com/theme?product=sydney) - Publisher: Codigrate (https://codigrate.com) From across the harbour the sails of the Sydney Opera House look plain white. Up close they are not. The shells are covered in 1,056,006 tiles laid in a chevron pattern, and they come in two finishes, a glossy white and a matte cream. The tiles were made in Sweden by Höganäs, a firm that until then had mostly made stoneware for paper mills, and Jørn Utzon worked with them for about three years to get the tile right: 120 millimetres square, clay with crushed stone in it, after a grain he had admired in Japanese ceramic bowls. Seen from a ferry, the two whites add up to one bright roof that still has some softness in it. Codigrate's Sydney theme is the harbour at midday, and it starts from the same idea: more than one white. What follows takes it apart color by color. It is the eighth city in this series after [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme), [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme), [Rio de Janeiro](https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme), [Tokyo](https://codigrate.com/blog/anatomy-of-the-tokyo-theme), [Tallinn](https://codigrate.com/blog/anatomy-of-the-tallinn-theme) and [Prague](https://codigrate.com/blog/anatomy-of-the-prague-theme), and the fourth premium theme after [Ocean](https://codigrate.com/blog/anatomy-of-the-ocean-theme), [Salda](https://codigrate.com/blog/anatomy-of-the-salda-theme) and Prague. ## A Harbour At Midday The theme's own description sets the scene: Sydney Harbour at midday, from the white sails of the Opera House to the sandstone glowing along the shore, airy white and pale mist backgrounds with harbour blues, jade teals and outback golds. The palette names read like a ferry ride. Sail White, Opera White, Harbour Mist, Bondi Shallows, Grey Gull, Harbour Blue, Reef Blue, Pacific Blue, Tasman Teal and Ocean Ink are the water, from the foam to the deep channel. Jade Bay sits where the water turns green over the rocks. Peach Shell, Bondi Sand, Outback Gold, Desert Clay and Outback Copper are the land. A deep teal [#08637F](https://codigrate.com/tools/color/08637F) is the accent of the interface, used for links and the small marks that need to stand out, with a Pacific blue [#0F91C7](https://codigrate.com/tools/color/0F91C7) as its second accent. In the code, a harbour blue [#2E89A6](https://codigrate.com/tools/color/2E89A6), a deeper harbour [#2F6781](https://codigrate.com/tools/color/2F6781) and a reef teal [#0290A3](https://codigrate.com/tools/color/0290A3) carry the water, and a desert clay [#BA7347](https://codigrate.com/tools/color/BA7347) and an outback gold [#AF8427](https://codigrate.com/tools/color/AF8427) carry the shore. ## The Harmony: Harbour Against Sandstone On a wheel, Sydney has two groups and very little in between. The cool group is an [analogous](https://codigrate.com/blog/introduction-to-color-harmony) sweep from jade to harbour blue: parameters at 164 degrees, annotations at 170, JavaScript member functions at 175, fields and methods at 187, the keywords and every background at 195, and the strings at 199. The warm group is the sandstone, a short arc from 23 to 45: desert clay locals, a sandstone for tags, outback gold for statics and globals, ochre for attributes, and the comments at the far end of it. The two groups face each other. The opposite of the harbour blue at 195 is 15, and the desert clay at 23 sits almost there, so the theme is close to a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair: the water and the stone it is cut into. It is the view from the Rocks at noon, a blue harbour below and warm yellow blocks of the old town around you. ## Backgrounds, Two Whites And The Water Sydney's backgrounds step from white to a real blue: - Input [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), sail white, the one pure white, used for search fields and text boxes: the glossy tile. - Editor [#F6F9FA](https://codigrate.com/tools/color/F6F9FA), opera white, a white with a breath of harbour blue in it, the page the code is written on: the matte one. - Window [#CAE4EC](https://codigrate.com/tools/color/CAE4EC), harbour mist, for the tool windows and panels. - Surface [#73B9D0](https://codigrate.com/tools/color/73B9D0), harbour blue, for the outer frame the whole window sits in. The frame is a true blue, at about 2:1 against the editor, so the code sits in it like a white sail on the water instead of disappearing into a field of near whites. The gutter goes back up to an almost pure white [#FEFEFE](https://codigrate.com/tools/color/FEFEFE), the current line is marked by a pale shallows blue [#CEE8F3](https://codigrate.com/tools/color/CEE8F3), and a selected row in the project tree is Bondi shallows [#ABDAE8](https://codigrate.com/tools/color/ABDAE8) edged in reef blue [#169DC5](https://codigrate.com/tools/color/169DC5). The warm colors come in where the window tells you something. Selected text in the editor turns a sandstone cream [#ECE7D1](https://codigrate.com/tools/color/ECE7D1), the one warm white in the theme. The active editor tab sits on a peach shell [#FAE5D9](https://codigrate.com/tools/color/FAE5D9) with an outback copper underline [#D17F51](https://codigrate.com/tools/color/D17F51). Search matches are Bondi sand [#ECD268](https://codigrate.com/tools/color/ECD268) in the tool windows, and in the editor an outback brown [#7C6A24](https://codigrate.com/tools/color/7C6A24) on a pale sand [#F8F1D9](https://codigrate.com/tools/color/F8F1D9). The word under the caret is the one place the bush comes down to the water: a eucalyptus green [#2A6C04](https://codigrate.com/tools/color/2A6C04) on [#E1F4D6](https://codigrate.com/tools/color/E1F4D6) where it is read, and a deeper green [#04770E](https://codigrate.com/tools/color/04770E) on [#D2F1D4](https://codigrate.com/tools/color/D2F1D4) where it is written. ## One Foreground, Several Voices Code is written in a deep harbour ink [#05242E](https://codigrate.com/tools/color/05242E) at about 15:1 against the editor, and class names, function names and constants stay a near black [#131B25](https://codigrate.com/tools/color/131B25) at about 16:1. The interface uses ocean ink [#062E3A](https://codigrate.com/tools/color/062E3A), the same blue gone almost black, and one level down a Tasman teal [#0E5E76](https://codigrate.com/tools/color/0E5E76) for hints and secondary labels. Comments are a sandstone grey [#9C9378](https://codigrate.com/tools/color/9C9378) in italics, at about 2.9:1, the quietest text in the theme. In a bright room a pale warm grey on white reads as a note in the margin, and that is how Sydney treats them: you read past them until you want them. If your files lean heavily on comments, this is the one place the theme asks you to look a little harder, a trade made to keep the page calm, the same ladder as in [the readability post](https://codigrate.com/blog/introduction-to-readability) with the bottom rung set low. The gutter is the water again. Line numbers are a grey gull blue [#6D9DAC](https://codigrate.com/tools/color/6D9DAC), the number on the current line darkens to a deep Tasman teal [#1D6076](https://codigrate.com/tools/color/1D6076) at about 6.7:1, and the caret is a harbour slate [#42798E](https://codigrate.com/tools/color/42798E). ## Syntax: Water, Reef And Sandstone Open a file and the harbour fills in: - Keywords in bold harbour blue [#2E89A6](https://codigrate.com/tools/color/2E89A6), at about 3.8:1, with the weight doing what a darker shade would otherwise have to. - Strings, numbers and escapes in a deeper harbour [#2F6781](https://codigrate.com/tools/color/2F6781), the darkest syntax color at about 5.9:1, the deep channel where the ferries run. - Instance fields and methods in reef teal [#0290A3](https://codigrate.com/tools/color/0290A3), and JavaScript member functions in a greener teal [#038E82](https://codigrate.com/tools/color/038E82). - Parameters in a deep jade [#177A60](https://codigrate.com/tools/color/177A60) at about 5:1, and annotations in jade bay [#2F9383](https://codigrate.com/tools/color/2F9383), the water over the rocks. - Local variables in desert clay [#BA7347](https://codigrate.com/tools/color/BA7347). - Static fields and methods in outback gold [#AF8427](https://codigrate.com/tools/color/AF8427), global variables in a close gold [#B38631](https://codigrate.com/tools/color/B38631), and attributes in a brighter ochre [#B58B22](https://codigrate.com/tools/color/B58B22). - Tags in sandstone [#C18C47](https://codigrate.com/tools/color/C18C47), set in bold for HTML and XML tag names. Every colored token sits between about 3:1 and 6:1, much lighter than the ink around it. That is what lets Sydney stay airy. The near black names and the deep ink of plain text hold the shape of a file, so the blues, teals and golds can stay as soft as the harbour on a clear day and still be told apart by hue. ## The Final Product Here is Sydney put back together. Harbour mist frames a JetBrains IDE and Sublime Text, Slack and Ghostty keep the same pale blue around the chat and the shell, and in Rhino the viewports stay a clean opera white with the panels around them in mist.
Sydney theme in a JetBrains IDE
JetBrains
Sydney theme in Sublime Text
Sublime Text
Sydney theme in Slack
Slack
Sydney theme in Ghostty
Ghostty
Sydney theme in Rhino
Rhino
## Reading It Back Taken apart, Sydney is a harbour seen from the stone above it. Two whites carry the page, a soft opera white for the code and a pure sail white only where you type, inside a frame of harbour mist and harbour blue. The water side of the wheel carries the keywords, the values, the members and the parameters; the sandstone side carries the locals, the statics, the globals, the attributes and the tags. The marks that tell you where you are come in warm, a cream selection and a copper tab, and the comments step far back into a sandstone grey. It is a theme for a bright room and a long day, which is when the real harbour looks most like this, the sails white against the water and the ferries crossing below. Sydney is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=sydney). ## Frequently Asked Questions ### What is the Sydney theme? Sydney is one of Codigrate's premium light city themes, built around Sydney Harbour at midday: the white sails of the Opera House, pale blue water full of ferries, and the sandstone of the shore warming in the sun. The editor is a soft opera white, the panels around it a harbour mist and a harbour blue, and the code splits between the water and the land: harbour blues and reef teals for keywords, strings, members and parameters, and desert clay, outback gold and sandstone for local variables, static members, attributes and tags. ### Why does Sydney use two different whites? For the same reason the Opera House roof does. Its shells look plain white from the water, but up close they are covered in a chevron of glossy white and matte cream tiles. Sydney does the same on screen: the editor is an opera white #F6F9FA with a breath of harbour blue in it, the soft one you look at for hours, and only the input fields and the gutter go to a pure white, so the place you type is the brightest spot in the window. Selected text turns a sandstone cream #ECE7D1, the one warm white in the theme. ### How are the syntax colors chosen in Sydney? They sit on two sides of the wheel. The cool side, between 164 and 199 degrees, is the water: bold harbour blue keywords, deeper harbour blue strings and numbers, reef teal fields and methods, and a deep jade for parameters. The warm side, between 23 and 45 degrees, is the sandstone shore: desert clay for local variables, outback gold for static members and globals, ochre for attributes and a sandstone for tags. Class and function names stay a near black ink, which carries the structure so the colors can stay as soft as the harbour. ### Where can I get the Sydney theme? Sydney is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the Sydney theme page. --- # Anatomy of a Dark Theme: Prague > Anatomy of Prague, a dark IDE theme: deep Vltava blues for the frame and the keywords, lit by gas lamp amber, rooftop copper and straw gold. - URL: https://codigrate.com/blog/anatomy-of-the-prague-theme - Published: 2026-10-09 - Category: Inspiration - Theme: [Prague](https://codigrate.com/theme?product=prague) - Publisher: Codigrate (https://codigrate.com) Prague lit its first two hundred gas lamps on 15 September 1847. By 1940 there were close to nine thousand of them, and then the city slowly gave them up: the last ones, on Hradčany Square and Loretánská street up by the castle, were switched to electricity in 1985. In 2002 the gas came back along the Royal Route, the road the Bohemian kings walked to their coronations, and about seven hundred lamps burn on it again today. In Advent the lamps on Charles Bridge are lit by hand at dusk, by a lamplighter carrying a pole from the late nineteenth century. Codigrate's Prague theme is that walk at dusk. The river and the sky over the castle are deep blue, and against them the gas lamps, the copper roofs and the old gold of the stone come on one at a time. What follows takes it apart color by color. It is the seventh city in this series after [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme), [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme), [Rio de Janeiro](https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme), [Tokyo](https://codigrate.com/blog/anatomy-of-the-tokyo-theme) and [Tallinn](https://codigrate.com/blog/anatomy-of-the-tallinn-theme), and the third premium theme after [Ocean](https://codigrate.com/blog/anatomy-of-the-ocean-theme) and [Salda](https://codigrate.com/blog/anatomy-of-the-salda-theme). Tokyo also dresses its night in one blue, but lights it with neon; Prague lights it with fire. ## A River And Its Lamps The theme's own description sets the scene: Prague after dark, the deep blues of the Vltava and the gas lamps glowing along its bridges, midnight navy and castle blue shadows with amber, copper and straw gold accents. The palette names walk across the bridge from one side to the other. Old Town Shadow, Vltava Night, Castle Night, Bohemian Blue, Bridge Blue, Slate Blue, Stone Blue and Moonstone are the night and the water; Pale Vltava and Daylight Blue are the river catching the last of the sky. Candle Gold, Parchment Gold, Straw Gold, Amber Lantern, Rooftop Copper and Brass Shadow are the lamps and the roofs. The interface leans on both. A bridge blue [#5BA0E5](https://codigrate.com/tools/color/5BA0E5) is the accent for links and the small marks that need to stand out, and an amber [#C78921](https://codigrate.com/tools/color/C78921) is its second accent. In the code the same split runs through every line: daylight blue [#74ADF8](https://codigrate.com/tools/color/74ADF8) and pale Vltava [#89C5F8](https://codigrate.com/tools/color/89C5F8) for the language, amber lantern [#EFBA5A](https://codigrate.com/tools/color/EFBA5A), rooftop copper [#DF865B](https://codigrate.com/tools/color/DF865B) and straw gold [#E3CA77](https://codigrate.com/tools/color/E3CA77) for the warm side. ## The Harmony: River Against Lamplight On a wheel, Prague is a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair in the plainest sense. The blues all gather near 210 degrees: every background, the interface text, the caret, the keywords, the strings and the static members, between 206 and 214. The opposite of 210 is 30, an amber, and that is where the lamps are. Rooftop copper sits at 20, the amber lantern at 39, straw gold at 46 and parchment at 48, a short warm arc straight across from the river. Two colors step off the axis on purpose. Local variables are a lavender at 256, a little past the blues toward violet, the color the sky turns over the castle just after the sun goes. Global variables are a faded brick at 3, a little past the coppers toward red, like the tiled roofs of the Lesser Town. They keep the theme from being a strict two color poster without breaking its idea: cool for the river, warm for the lamps, and a little dusk and a little brick in between. ## Backgrounds, Down To The River Prague's backgrounds are four blues on the same hue, near 210 degrees: - Input [#070F17](https://codigrate.com/tools/color/070F17), old town shadow, the darkest well, where you type into search fields and dialogs. - Editor [#0D1D2E](https://codigrate.com/tools/color/0D1D2E), Vltava night, the river the code is written on. - Window [#123151](https://codigrate.com/tools/color/123151), castle night, for the tool windows and panels. - Surface [#113E6B](https://codigrate.com/tools/color/113E6B), Bohemian blue, the outer frame the whole window sits in. What changes from one to the next is not only lightness. The higher the panel, the more color it holds: the editor sits at about 56 percent saturation, the windows at 64 and the frame at 73. So the code area stays close to a black water, and the panels around it read as a clearer blue sky above it, the way the river at dusk is always darker than the air over the castle. A selected row in the project tree stays in that sky, a deeper blue [#18406A](https://codigrate.com/tools/color/18406A) edged in bridge blue [#1E5FA0](https://codigrate.com/tools/color/1E5FA0). The lamps are where the window tells you something. Selected text in the editor turns a dark brass [#544410](https://codigrate.com/tools/color/544410). The active editor tab sits on a brass shadow [#544723](https://codigrate.com/tools/color/544723) with an old gold underline [#C49D3A](https://codigrate.com/tools/color/C49D3A), and the progress bar runs in amber [#C78921](https://codigrate.com/tools/color/C78921). Search matches glow copper, [#DDAE94](https://codigrate.com/tools/color/DDAE94) on [#61351E](https://codigrate.com/tools/color/61351E). Even the word under the caret plays the same game: where it is read it stays in the river, a pale blue [#C3D7E3](https://codigrate.com/tools/color/C3D7E3) on [#346C8F](https://codigrate.com/tools/color/346C8F), and where it is written to it turns gold, [#E8E4CB](https://codigrate.com/tools/color/E8E4CB) on [#857D3D](https://codigrate.com/tools/color/857D3D). Reads are water, writes are lamplight. ## One Foreground, Several Voices Code is written in a near white [#EBEBEC](https://codigrate.com/tools/color/EBEBEC) at about 14:1 against the editor, and class names, function names and constants stay a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0) at about 13:1. The interface around it uses moonstone [#BBC9D7](https://codigrate.com/tools/color/BBC9D7), the pale blue of the moon over the castle, and one level down a slate [#89A2BC](https://codigrate.com/tools/color/89A2BC) for hints and secondary labels, both on the same hue as the river. Comments are a stone blue [#92A3B3](https://codigrate.com/tools/color/92A3B3) set in italics, at about 6.6:1. That is brighter than most comments in this series, and it suits a theme this dark: on a near black page a dim grey would sink out of sight, so Prague keeps its notes readable and lets the italic and the missing color do the stepping back. They sit one rung below the code on the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability). The gutter is the river itself. Line numbers are a quiet blue [#3168A4](https://codigrate.com/tools/color/3168A4) at about 3:1, the number on the current line brightens to [#4C91D7](https://codigrate.com/tools/color/4C91D7), and the caret is a pale steel [#90B2D1](https://codigrate.com/tools/color/90B2D1), so your place on the left edge shows as a little more light on the water. ## Syntax: River Blues And Lamplight Open a file and the bridge fills in: - Keywords in daylight blue [#74ADF8](https://codigrate.com/tools/color/74ADF8), the most saturated blue in the theme, the most common colored words in any file. - Strings, numbers and escapes in pale Vltava [#89C5F8](https://codigrate.com/tools/color/89C5F8), a lighter, softer blue. - Static fields and methods in an italic ice blue [#A8D4F6](https://codigrate.com/tools/color/A8D4F6), lighter again. Keywords, values and statics climb the same blue toward white, so the language reads as one river at three depths. - Local variables in a dusk lavender [#BEB2DF](https://codigrate.com/tools/color/BEB2DF), the sky over the castle. - Instance fields and methods in amber lantern [#EFBA5A](https://codigrate.com/tools/color/EFBA5A), and JavaScript member functions in a deeper amber [#F4AA49](https://codigrate.com/tools/color/F4AA49), the gas lamps on the bridge. - Parameters, and HTML and XML tags, in rooftop copper [#DF865B](https://codigrate.com/tools/color/DF865B). - Attributes in straw gold [#E3CA77](https://codigrate.com/tools/color/E3CA77), and annotations in parchment [#DCCF9D](https://codigrate.com/tools/color/DCCF9D), the faded paper of an old city archive. - Global variables in a faded brick [#D88783](https://codigrate.com/tools/color/D88783), the roofs of the Lesser Town. With the names left a plain grey, a Prague file splits cleanly in two. The blue half is the language and its values, the part you read; the warm half is the members, the parameters and the attributes, the part you follow from one call to the next. ## The Final Product Here is Prague put back together. The deep blue fills a JetBrains IDE and Sublime Text, Slack and Ghostty keep the same river night around the chat and the shell, and in Rhino the viewports turn the navy of the Vltava after dark, with old gold marking the active tab and the switches that are on.
Prague theme in a JetBrains IDE
JetBrains
Prague theme in Sublime Text
Sublime Text
Prague theme in Slack
Slack
Prague theme in Ghostty
Ghostty
Prague theme in Rhino
Rhino
## Reading It Back Taken apart, Prague is a river and its lamps. The backgrounds, the gutter, the interface text and the language itself are all one blue, darkest where the code sits and clearest in the frame above it. The warm colors are rationed to the members, the parameters and the attributes, and to the marks that tell you where you are: the selection, the open tab, the search match and every place a variable is written to. A lavender and a brick step just off that line to keep it from feeling like a diagram. It is a theme for evening work in a dim room, which is also the hour the real city is at its best, the bridge lit and the river turning black below it. Prague is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=prague). ## Frequently Asked Questions ### What is the Prague theme? Prague is one of Codigrate's premium dark city themes, built around Prague after dark: the Vltava running black and blue under the castle, and the gas lamps of Charles Bridge burning along it. The frame of the editor is the river and the night sky, four deep blues on one hue. The code is split between the two: the language itself in river and daylight blues, and the members, parameters and attributes in the warm colors of the old town, amber lantern, rooftop copper, straw gold and parchment. ### Why does Prague mark selections in gold instead of blue? Because in a window built entirely from blue, gold is the color that reads as light. Selected text turns a dark brass #544410, the active editor tab sits on a brass shadow #544723 with an old gold underline #C49D3A, the progress bar runs in amber and search matches glow copper. Everything that tells you where you are or what you picked looks like a lamp on the river, and it never gets confused with the blue keywords and strings around it. ### How are the syntax colors chosen in Prague? The blues and the golds sit on opposite sides of the color wheel, near 210 and near 30 degrees, and each side gets its own kind of token. The blues carry the language and its values: daylight blue keywords, pale river blue strings and numbers, and an even paler italic blue for static members. The warm side carries what belongs to objects and calls: amber lantern for fields and methods, rooftop copper for parameters and tags, straw gold for attributes and parchment for annotations. A lavender for local variables and a faded brick for globals sit between them. ### Where can I get the Prague theme? Prague is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the Prague theme page. --- # Anatomy of a Light Theme: Salda > Anatomy of Salda, a light IDE theme: white sand and warm shore backgrounds, lagoon blue keywords, turquoise strings and a reed green for parameters. - URL: https://codigrate.com/blog/anatomy-of-the-salda-theme - Published: 2026-10-08 - Category: Inspiration - Theme: [Salda](https://codigrate.com/theme?product=salda) - Publisher: Codigrate (https://codigrate.com) Lake Salda sits in the hills of Burdur, in the southwest of Turkey, and from the right spot on its shore it does not look like it belongs there. The water is so clear that the bottom shows a long way out, it runs from a pale turquoise over the shallows to a dark blue where the lake drops away, and the beach is not the brown or grey of most lakes but a bright, almost chalky white. People call it the Maldives of Turkey, which undersells it a little. The white is hydromagnesite, a carbonate built up over thousands of years partly by microbial mats in the water, and it is close enough to what lies on the floor of Jezero Crater on Mars that NASA scientists came to study it before the Perseverance rover landed there. Codigrate's Salda theme is the lake on a bright morning: the frame is the white shore, the code is the water. What follows takes it apart color by color. It is the eighth nature theme in this series after [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme), [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme), [Sequoia](https://codigrate.com/blog/anatomy-of-the-sequoia-theme), [Autumn](https://codigrate.com/blog/anatomy-of-the-autumn-theme), [Roraima](https://codigrate.com/blog/anatomy-of-the-roraima-theme), [Sakura](https://codigrate.com/blog/anatomy-of-the-sakura-theme) and [Ocean](https://codigrate.com/blog/anatomy-of-the-ocean-theme), and the second of the premium themes, after Ocean. Where Ocean goes under the water, Salda stays on the beach and looks out at it. ## A Shore And Its Shallows The theme's own description puts it simply: the white shores and turquoise shallows of the lake, warm sand and soft cream backgrounds, clear lagoon blues and teals, and a fresh reed green for the syntax that matters. The palette names walk from the beach into the water: Shell White, White Sand, Warm Shore, Sandbank, Dune Edge and Driftsand on the dry side, then Shallow Turquoise, Soft Lagoon, Bright Lagoon, Lakeshore Blue, Shaded Lagoon and Reed Green as the lake gets deeper, with Cedar Bark, Dark Cedar and Clay Bank for the hills and trees behind it. Most of the window is sand. The backgrounds, the selected rows and the gutter all sit near one warm hue, around 41 degrees, and differ only in how much light they hold. A cedar brown [#715827](https://codigrate.com/tools/color/715827) is the accent of the interface, used for links and the small marks that need to stand out, with a bright lagoon [#28B6CE](https://codigrate.com/tools/color/28B6CE) as its second accent. The water is laid on top of it in the code: a lakeshore blue [#44849F](https://codigrate.com/tools/color/44849F), a bright lagoon [#1397AE](https://codigrate.com/tools/color/1397AE), a shaded lagoon [#277878](https://codigrate.com/tools/color/277878) and a reed green [#0F9363](https://codigrate.com/tools/color/0F9363), with a clay bank [#8F6055](https://codigrate.com/tools/color/8F6055) as the one warm voice that gets a real job. ## The Harmony: Sand Against Water On a wheel, Salda is a [complementary](https://codigrate.com/blog/harmony-in-opposites) theme with the halves given very different jobs. The sand is one point, near 41 degrees: every background, the interface text, the caret, the line numbers. The exact opposite of 41 is 221, a blue, and that is where the water is. The syntax colors fan out on that side of the wheel: reed green parameters at 158, the shaded lagoon of local variables at 180, the turquoise of strings at 189, lakeshore blue keywords at 198, the blue of tags at 205, and static members in a deep blue at 222, almost exactly across from the sand. The warm colors that do appear in the code stay close to the shore instead of crossing over. Fields and methods are a clay at 11 degrees, attributes a reddish clay at 16, JavaScript member functions a light cedar at 30 and annotations a driftsand at 35. So the wheel splits into a frame and its members on the warm side and the language itself on the cool side. On screen that reads the way the lake does from the beach: everything you stand on is sand, and everything you look at is water. ## Backgrounds, Grain By Grain Salda's backgrounds are four kinds of sand, from the brightest to the deepest: - Input [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), shell white, the only true white in the theme, used for search fields and text boxes. - Editor [#FDFCFA](https://codigrate.com/tools/color/FDFCFA), white sand, the page the code is written on. - Window [#FDF6E7](https://codigrate.com/tools/color/FDF6E7), a warm shore for the tool windows and panels. - Surface [#ECE1C9](https://codigrate.com/tools/color/ECE1C9), a sandbank for separators and the frame around them. The editor and the windows sit very close in lightness, and that is on purpose. In a light theme big steps between panels make the screen look busy, so Salda separates them by warmth instead: the editor is the coolest of the sands, nearly white, and the windows around it lean a little more toward cream. The gutter is a sand [#FBF8F1](https://codigrate.com/tools/color/FBF8F1) half a shade warmer than the page, and the current line is marked by a wet sand [#F1E8D3](https://codigrate.com/tools/color/F1E8D3), like the strip of beach the last wave just left. Selections stay on the shore too. Selected text in the editor turns a darker sand [#EAD5BF](https://codigrate.com/tools/color/EAD5BF), and a selected row in the project tree is a dune [#F3E7CC](https://codigrate.com/tools/color/F3E7CC) edged in [#B9A373](https://codigrate.com/tools/color/B9A373). Hovering over a row darkens it to [#E3D4AF](https://codigrate.com/tools/color/E3D4AF). The water enters the frame in only one place. The active editor tab sits on a pale turquoise [#DCF4F8](https://codigrate.com/tools/color/DCF4F8) with a soft lagoon underline [#68B0BC](https://codigrate.com/tools/color/68B0BC), so the file you are in is the one patch of shallows in a window full of sand. Search works the same way: matches are a lagoon [#288393](https://codigrate.com/tools/color/288393) on a near white turquoise [#E9F8FA](https://codigrate.com/tools/color/E9F8FA), the word under the caret is a deep blue [#0B5788](https://codigrate.com/tools/color/0B5788) on [#C9E5F7](https://codigrate.com/tools/color/C9E5F7), and a place where that word is written to turns green, [#05753E](https://codigrate.com/tools/color/05753E) on [#C1E6D4](https://codigrate.com/tools/color/C1E6D4), so reads and writes are told apart at a glance. ## One Foreground, Several Voices Here Salda does something small and easy to miss. The code and the interface do not share a text color. Code is written in [#102020](https://codigrate.com/tools/color/102020), a near black with a trace of deep lake teal in it, at about 16.4:1 against the editor. The menus, labels and tree around it use a dark cedar [#312408](https://codigrate.com/tools/color/312408) at about 14.8:1, warm instead of cool, and one level down a shore shadow [#685C43](https://codigrate.com/tools/color/685C43) at about 6.4:1 for hints and secondary labels. Both darks are far from pale, but the eye still feels the difference: the code belongs to the water, the interface belongs to the land. Comments step back into a neutral grey [#868888](https://codigrate.com/tools/color/868888) set in italics, at about 3.5:1. That is quieter than the sea foam comments of Ocean, which suits a light theme, where a grey on white already reads as a side note. It sits one rung below the code on the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability), and the italic does as much as the color to tell you that you are reading a note and not an instruction. The gutter is driftwood. Line numbers are a muted sand brown [#8E8267](https://codigrate.com/tools/color/8E8267), the number on the current line darkens to a deep cedar [#6F4E06](https://codigrate.com/tools/color/6F4E06) at about 7.4:1, and the caret is a cedar bark [#8D7540](https://codigrate.com/tools/color/8D7540), so your position on the left edge is marked in the color of the trees above the shore rather than in a bright blue. ## Syntax: The Colors Of A Clear Lake Open a file and the water fills in: - Keywords in bold lakeshore blue [#44849F](https://codigrate.com/tools/color/44849F), the most common colored words in any file, in the calm blue of the lake seen from the beach. - Strings, numbers and escapes in bright lagoon [#1397AE](https://codigrate.com/tools/color/1397AE), the turquoise of the shallows and the brightest color in the editor. At about 3.4:1 it is the lightest of the text colors, a fair trade for the most saturated one. - Local variables in shaded lagoon [#277878](https://codigrate.com/tools/color/277878), the same water where it gets deeper, at about 5:1. - Parameters in reed green [#0F9363](https://codigrate.com/tools/color/0F9363), the reeds at the water's edge, and global variables in a softer sage [#497E6B](https://codigrate.com/tools/color/497E6B). - Static fields and methods in a deep blue [#405891](https://codigrate.com/tools/color/405891), the darkest water in the palette at about 6.8:1, where the lake drops away. - Instance fields and methods in clay bank [#8F6055](https://codigrate.com/tools/color/8F6055), the one warm color that marks a real role, and JavaScript member functions in a lighter cedar [#AA7D4F](https://codigrate.com/tools/color/AA7D4F). - Tags in a lake blue [#3F7FAE](https://codigrate.com/tools/color/3F7FAE), set in bold for HTML and XML tag names, attributes in a reddish clay [#9E7363](https://codigrate.com/tools/color/9E7363), and annotations in driftsand [#A59379](https://codigrate.com/tools/color/A59379). Class names, function names and constants stay in the deep lake near black [#102020](https://codigrate.com/tools/color/102020). That is the same choice the dark themes in this series make with their light greys: the names hold the structure of a file, so they are left plain, and the color is spent on the keywords, the values and the variables you are actually tracing. ## The Final Product Here is Salda put back together. The white sand fills a JetBrains IDE and Sublime Text, Slack and Ghostty keep the same bright shore around the chat and the shell, and in Rhino the viewports turn pale enough to feel like modeling on the beach, with lagoon blue on the active tab and the switches that are on.
Salda theme in a JetBrains IDE
JetBrains
Salda theme in Sublime Text
Sublime Text
Salda theme in Slack
Slack
Salda theme in Ghostty
Ghostty
Salda theme in Rhino
Rhino
## Reading It Back Taken apart, Salda is a beach and a lake. The backgrounds, the gutter, the selections and the interface text are all sand, from shell white to dark cedar, so the frame stays warm and quiet. The code is the water, set on the opposite side of the wheel: lakeshore blue keywords, turquoise strings, a shaded lagoon for locals, reeds for parameters and a deep blue for statics, with clay kept for the members so the warm side still has a voice. Even the text color is split between the two, a lake tinted black for code and a cedar black for everything around it. It is a theme for daylight, for a desk by a window and a long morning of work, which is also the best time to see the lake. Salda is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=salda). ## Frequently Asked Questions ### What is the Salda theme? Salda is one of Codigrate's premium light nature themes, built around Lake Salda in southwestern Turkey, a deep, very clear lake with a shore of bright white sand. The frame of the editor is the shore: white sand, a warm cream and a darker sandbank, with dark cedar text. The code is the water: lakeshore blue keywords in bold, bright lagoon turquoise for strings and numbers, a shaded lagoon teal for local variables and a reed green for parameters, with a clay brown kept for fields and methods. ### Why does Salda use warm sand backgrounds instead of pure white? Because a white that leans warm is easier to sit in front of all day than a cold paper white, and because the shore of Lake Salda is not pure white either. The editor is a white sand #FDFCFA, the tool windows a warm shore #FDF6E7 and the outer frame a sandbank #ECE1C9, all near a hue of 41 degrees, so the panels separate by a little more or a little less sand. Only the input fields go to a true white #FFFFFF, which makes the place you type the brightest spot on screen. ### How are the syntax colors chosen in Salda? They come from the water side of the lake. The sand of the frame sits near 41 degrees on the color wheel and almost every syntax color sits across from it, between 158 and 222 degrees: reed green parameters, a shaded lagoon for locals, bright lagoon turquoise for strings, lakeshore blue keywords and a deep blue for static members. The few warm colors, a clay brown for fields and methods, a reddish clay for attributes and a driftsand for annotations, stay close to the sand so the frame and the members feel like the same shore. ### Where can I get the Salda theme? Salda is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the Salda theme page. --- # Anatomy of a Dark Theme: Ocean > Anatomy of Ocean, a dark IDE theme: deep teal water lit by bioluminescent cyan, with the coral, anemone pink and sandbar gold of a reef in a diver's light. - URL: https://codigrate.com/blog/anatomy-of-the-ocean-theme - Published: 2026-10-07 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Ocean](https://codigrate.com/theme?product=ocean) - Publisher: Codigrate (https://codigrate.com) The sea takes red away first. A few meters under the surface a diver's red fins have already gone brown, by around ten meters most of the red in daylight has been absorbed, and further down the oranges and yellows follow until what is left is a narrow band of blue and green. Below about two hundred meters there is too little of it left to see by, below a thousand meters there is none, and the only light is the light animals make for themselves. Most of it is blue green too, the colors that travel farthest through sea water. Many of the animals that live down there are red, because where no red light arrives, red is the color of being invisible. Codigrate's Ocean theme is built in that water. The dark is teal, the glow is cyan and sea green, and the reds come back the way they do on a night dive, as corals and pinks lit up for a moment by a lamp. What follows takes it apart color by color. It is the seventh nature theme in this series after [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme), [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme), [Sequoia](https://codigrate.com/blog/anatomy-of-the-sequoia-theme), [Autumn](https://codigrate.com/blog/anatomy-of-the-autumn-theme), [Roraima](https://codigrate.com/blog/anatomy-of-the-roraima-theme) and [Sakura](https://codigrate.com/blog/anatomy-of-the-sakura-theme), and the first of the premium themes. ## A Sea Lit From Within The theme's own description is a dive: the deep sea and the quiet glow of life far below the surface, dark teal and blue green shadows, bioluminescent cyan, coral pink and sea glass, deep cool backgrounds to keep the editor restful, and warm sandbar tones for the syntax that matters. The palette names read like a depth chart: Ocean Floor, Deep Water, Dark Current, Deep Reef, Trench Blue, Open Water, then the life on the reef, Tropic Cyan, Lagoon Teal, Sea Glass, Coral Sand, Coral Blush, Anemone Pink, Urchin Violet and Pale Sandbar. Most of the theme is water. The backgrounds, the selected rows and the gutter all sit near one teal, around 187 degrees, and differ only in how deep they are. A sea glass teal [#5AC8B2](https://codigrate.com/tools/color/5AC8B2) runs through the interface as the accent, with a deeper lagoon [#0BA0A5](https://codigrate.com/tools/color/0BA0A5) beside it. The life is laid on top: a tropic cyan [#3FB4D8](https://codigrate.com/tools/color/3FB4D8), a coral blush [#DC7783](https://codigrate.com/tools/color/DC7783), an anemone pink [#EE8EBF](https://codigrate.com/tools/color/EE8EBF), an urchin violet [#B88BDA](https://codigrate.com/tools/color/B88BDA) and a pale sandbar [#EAC089](https://codigrate.com/tools/color/EAC089). ## The Harmony: Teal And Its Coral On a wheel, Ocean splits cleanly in two. The cool half runs from the greens of the reef to the violet of the urchins: a sea green for global variables near 141 degrees, the sea glass of tags near 144 and 156, the accent at 168, the background teal at 187, the cyan keywords at 194, the blue strings at 214 and the violet of static members out at 274. The exact opposite of the teal at 187 is a red near 7 degrees, and that is where the reef sits. Coral blush for methods and fields at 353 and coral sand for attributes at 18 stand on either side of that point, with anemone pink at 329 and the sandbar gold of parameters at 34 fanned out around them. That is a [complementary](https://codigrate.com/blog/harmony-in-opposites) layout, the strongest contrast the wheel has, and it is the contrast of a real reef: warm living color against cold water. Because the warm colors are spent on members, locals, attributes and parameters, the parts of a line you look for are exactly the parts that stand against the sea. ## Backgrounds, Fathoms Deep Ocean's backgrounds are four depths of the same water, all near 187 degrees: - Input [#0B2225](https://codigrate.com/tools/color/0B2225), the ocean floor, the darkest well, where you type into search fields and dialogs. - Editor [#102B2E](https://codigrate.com/tools/color/102B2E), deep water, the teal the code is written on. - Window [#18383C](https://codigrate.com/tools/color/18383C), a dark current for the tool windows and panels. - Surface [#1C4247](https://codigrate.com/tools/color/1C4247), the deep reef the whole window sits in. None of them is black. Each is the same teal with a little more or a little less light, so the panels part like layers of water rather than by drawn lines. The gutter sinks to the floor [#0B2627](https://codigrate.com/tools/color/0B2627), darker than the page beside it, and the current line rises to [#234445](https://codigrate.com/tools/color/234445). A selected row in the project tree is a shallower teal [#275A61](https://codigrate.com/tools/color/275A61) edged in [#52A5B0](https://codigrate.com/tools/color/52A5B0). Two things leave the teal on purpose. The active editor tab sits on a trench blue [#14364D](https://codigrate.com/tools/color/14364D) with an open water underline [#33698E](https://codigrate.com/tools/color/33698E), the one surface that turns toward true blue, so the tab you are in reads as deeper water than the rest. And selected text in the editor turns a dusky plum [#3E3136](https://codigrate.com/tools/color/3E3136), the color a red coral takes at depth before a light reaches it. Search matches glow like something alive: the matched text in a pink [#E1A9C1](https://codigrate.com/tools/color/E1A9C1) on a dark magenta [#331221](https://codigrate.com/tools/color/331221), while the word under the caret is marked in a pale foam [#D6F0F3](https://codigrate.com/tools/color/D6F0F3) on a deep lagoon [#0E5D64](https://codigrate.com/tools/color/0E5D64). ## One Foreground, Several Voices Code is written in a near white [#E0E3E3](https://codigrate.com/tools/color/E0E3E3) at about 11.6:1 against the editor, barely tinted toward the water. The interface text around it is sea salt [#AFBABD](https://codigrate.com/tools/color/AFBABD) at about 7.5:1, and one level down a bluer [#88AAB7](https://codigrate.com/tools/color/88AAB7), so labels and hints read as the same water at a lower light. Comments are where Ocean is unusual. They are a sea foam [#96B9B5](https://codigrate.com/tools/color/96B9B5) at about 7:1, far brighter than the faded grey most dark themes use, with line comments set in italics. They step back by hue and by slant rather than by fading out, so a note in an Ocean file stays easy to read. That is a different rung on the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): the comment still reads after the code, but it is never something you have to squint at. The gutter glows the way the deep sea does. The line numbers are a green teal [#27AC8D](https://codigrate.com/tools/color/27AC8D), the number on the current line lights up to a bright [#2DE5BB](https://codigrate.com/tools/color/2DE5BB) at about 9:1, and the caret is a pale cyan [#8DE1DA](https://codigrate.com/tools/color/8DE1DA), so your place on the left edge is marked like a light in dark water. ## Syntax: A Reef In A Diver's Lamp Open a file and the reef fills in: - Keywords in tropic cyan [#3FB4D8](https://codigrate.com/tools/color/3FB4D8), the most frequent colored words in any file, in the color of the water itself lit from within. - Strings, numbers and escapes in a bright blue [#69A6F8](https://codigrate.com/tools/color/69A6F8), the clearest cool color in the editor. - Methods and fields in coral blush [#DC7783](https://codigrate.com/tools/color/DC7783), and JavaScript member functions in a deeper coral [#D8616F](https://codigrate.com/tools/color/D8616F). - Local variables in anemone pink [#EE8EBF](https://codigrate.com/tools/color/EE8EBF), and global variables in a pale sea green [#83DBA2](https://codigrate.com/tools/color/83DBA2). - Static members in an italic urchin violet [#B88BDA](https://codigrate.com/tools/color/B88BDA), the one violet in the theme. - Parameters in pale sandbar [#EAC089](https://codigrate.com/tools/color/EAC089), the warmest light on the reef and the easiest token to find where a function takes its input. - Tags in sea glass [#5AB57E](https://codigrate.com/tools/color/5AB57E), attributes in coral sand [#DC9577](https://codigrate.com/tools/color/DC9577), and annotations in a driftwood brown [#A38473](https://codigrate.com/tools/color/A38473). Class names, function names and constants stay a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0) at about 11:1. With the names left uncolored and the keywords in the color of the water, the structure of a file reads as part of the sea, and the reef colors land only on the members, the locals and the inputs you came to find. ## The Final Product Here is Ocean put back together. The deep teal fills a JetBrains IDE and Sublime Text, Slack and Ghostty keep the same water around the chat and the shell, and in Rhino the viewports turn into a grid on the sea floor, which says a lot about how far one palette can travel.
Ocean theme in a JetBrains IDE
JetBrains
Ocean theme in Sublime Text
Sublime Text
Ocean theme in Slack
Slack
Ocean theme in Ghostty
Ghostty
Ocean theme in Rhino
Rhino
## Reading It Back Taken apart, Ocean is deep water and a reef. The backgrounds, the gutter and the selected rows are one teal at different depths, so the frame never competes with the code. The cool colors are the water and its glow, cyan keywords, blue strings, sea glass tags, and the warm colors sit straight across the wheel from it, coral, pink and sandbar gold, kept for the members, the locals and the parameters you look for. The comments stay readable as sea foam, and the names stay a light grey so nothing fights the structure. It suits a dark room and a long session, the kind where the screen is the only light, which is also what the deep sea is like. Ocean is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=ocean). ## Frequently Asked Questions ### What is the Ocean theme? Ocean is one of Codigrate's premium dark nature themes, built around the deep sea: dark teal water, the blue and green glow of animals that make their own light, and the corals and sandbars of a reef. The editor is a deep teal instead of black, the frame around it is the same water at a few depths, and the code is lit like a reef in a diver's lamp: tropic cyan for keywords, a bright blue for strings, coral for members, anemone pink for local variables, urchin violet for static members and a pale sandbar gold for parameters. ### Why is the Ocean background teal instead of black? Because that is the color water leaves behind. Sea water swallows red light first, so the deeper you go the more everything turns blue green before it turns dark. The input wells #0B2225, the editor #102B2E, the tool windows #18383C and the outer frame #1C4247 all share a hue near 187 degrees and differ only in depth, so the panels separate like layers of water rather than by drawn lines, and the cyan and coral on top read clearer against a colored dark than against a flat black. ### How are the syntax colors chosen in Ocean? They follow a reef. The cool half is the water and its glow: tropic cyan keywords, bright blue strings and numbers, sea glass tags and a sea green for global variables. The warm half is the reef itself, set straight across the color wheel from the teal: coral blush for methods and fields, anemone pink for local variables, coral sand for attributes and a pale sandbar gold for parameters. Static members are an italic urchin violet, class and function names stay a light grey, and comments are a sea foam that stays easy to read. ### Where can I get the Ocean theme? Ocean is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Sublime Text, Ghostty, iTerm2, macOS Terminal, Slack and Rhino it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the Ocean theme page. --- # Anatomy of a Light Theme: Tallinn > Anatomy of Tallinn, a light IDE theme: Baltic morning blues, a midnight ink foreground, cobalt keywords, amethyst strings and the red brick of the Old Town. - URL: https://codigrate.com/blog/anatomy-of-the-tallinn-theme - Published: 2026-10-06 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Tallinn](https://codigrate.com/theme?product=tallinn) - Publisher: Codigrate (https://codigrate.com) On the shortest day of the year the sun over Tallinn climbs about seven degrees above the horizon and then gives up. It rises after nine, sets before half past three, and for the six hours in between it never gets higher than a fist held out at arm's length. The light that reaches the Old Town comes in sideways, low across the roofs, and most of what lights the streets is not the sun at all but the sky, reflected off snow and pale stone. Everything takes a little of its blue. That is the light Codigrate's Tallinn theme is built in. The city under it is a Hanseatic town that has kept its walls, its towers and its red tile roofs well enough to sit on the UNESCO World Heritage list since 1997, most of it raised from the grey limestone the city stands on. What follows takes the theme apart color by color. It is the sixth city in this series after [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme), [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme), [Rio de Janeiro](https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme) and [Tokyo](https://codigrate.com/blog/anatomy-of-the-tokyo-theme), and the second light city after Rio, cold where Rio was tropical. ## A Town Of Limestone, Tile And Sky The theme's own description is a short one: crisp light and Baltic calm, airy porcelain backgrounds with cool Nordic blues, deep ink accents and a few lavender and rose highlights for warmth. Its palette names read like a walk from the harbor up to Toompea: Baltic Morning, Winter Sky, Limestone Blue, Cobalt Spire, Old Town Indigo, Pink Facade, Terracotta Roof, Weathered Brick. Most of the theme is the sky. The backgrounds, the interface text, the keywords, the caret and the line numbers all sit near the same blue, around 217 degrees, and differ in how light they are. A deep cobalt [#3F4494](https://codigrate.com/tools/color/3F4494) runs through the interface as the accent, with a periwinkle [#7179CC](https://codigrate.com/tools/color/7179CC) beside it. The town sits on top of that blue: the cobalt of the spires [#425EB8](https://codigrate.com/tools/color/425EB8), an amethyst [#81549C](https://codigrate.com/tools/color/81549C), a harbor blue [#377CC1](https://codigrate.com/tools/color/377CC1), a spruce green [#1E7857](https://codigrate.com/tools/color/1E7857) and the red of old brick [#B6564B](https://codigrate.com/tools/color/B6564B). ## The Harmony: A Cold Sky And Its Red Roofs On a wheel, Tallinn's cool colors make one long arc. The greens of the courtyards and the spruce sit near 138 and 158 degrees, the harbor blue of members near 210, the cobalt keywords near 226, the accent near 236 and the amethyst strings out at 278. That is an [analogous](https://codigrate.com/blog/introduction-to-color-harmony) spread, wide enough to tell tokens apart and close enough that the whole file reads as one cold morning. The warm colors do not sit straight across from the blue. The exact opposite of 217 degrees is near 37, and only one color in the theme stands there, the old brass of annotations at 32. The rest of the warmth sits about thirty degrees to one side of it: the brick of parameters at 6, the weathered brick of tags at 5, the rust of global variables at 9, the pink facade and terracotta of the open tab at 0. That is a [split complementary](https://codigrate.com/blog/harmony-in-opposites) layout. A pure opposite of a Baltic blue would be an orange, which the Old Town does not have. Red tile under snow is what it has, and the theme takes the red. ## Backgrounds, Lit By Snow A light theme lives on its whites, and Tallinn's are not white. Three of them share one hue near 217 degrees, and only the lightness moves: - Editor [#EDF2FA](https://codigrate.com/tools/color/EDF2FA), Baltic morning, the porcelain blue the code is written on and the brightest of the set. - Window [#D0DCEF](https://codigrate.com/tools/color/D0DCEF), a winter sky for the tool windows, tabs and panels. - Surface [#A9B9DA](https://codigrate.com/tools/color/A9B9DA), a limestone blue for the outer frame the whole window sits in. Input fields sit on a pure white [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), one step brighter than the editor, so the place you type is always the front of the window, fresh snow on old snow. The gutter is a paler wash [#E1E9F6](https://codigrate.com/tools/color/E1E9F6) and the current line lifts to [#D9E5F4](https://codigrate.com/tools/color/D9E5F4). Selection stays in the sky: selected text turns [#B7C3E3](https://codigrate.com/tools/color/B7C3E3), a hovered row [#B8D0F3](https://codigrate.com/tools/color/B8D0F3), and a selected row in the project tree [#BECCEC](https://codigrate.com/tools/color/BECCEC) edged in [#7A96D0](https://codigrate.com/tools/color/7A96D0). The one break is the open tab. The active editor tab sits on a pink facade [#ECC2C2](https://codigrate.com/tools/color/ECC2C2) with a terracotta underline [#C17777](https://codigrate.com/tools/color/C17777), the color of the merchant houses around the Town Hall Square. In a frame made entirely of cold blue, that single warm tab tells you where you are before you read its name, the way a red roof is the first thing you find from the walls. Search matches stay warm too: a dusty rose [#D8BEBE](https://codigrate.com/tools/color/D8BEBE) in the interface, and in the editor a candlelit parchment [#F1E4D3](https://codigrate.com/tools/color/F1E4D3) with the matched text in a dark amber [#855C27](https://codigrate.com/tools/color/855C27). ## One Foreground, Several Voices The text is not black either. Code is written in a midnight Baltic ink [#0F244F](https://codigrate.com/tools/color/0F244F), a blue so deep it only shows its color next to a true black, at about 13.5:1 against the editor. The interface text around it is a deep cobalt [#184092](https://codigrate.com/tools/color/184092) at about 8.5:1, the same hue lifted a step, so labels and hints come from the same ink as the code. Comments step back into a slate grey [#80899C](https://codigrate.com/tools/color/80899C) at around 3:1, set in italics, the color of limestone in shadow. It keeps the blue hue but loses nearly all of its color, which is enough to read as a note in the margin rather than part of the program. That is the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): the code you act on reads first, the notes about it second. The gutter is cut from the same stone. The caret is a steel blue [#4D6FA2](https://codigrate.com/tools/color/4D6FA2), the line numbers a pale slate [#7988A0](https://codigrate.com/tools/color/7988A0), and the number on the current line darkens to [#1D3E74](https://codigrate.com/tools/color/1D3E74), so your place on the left edge is marked by depth, not by a new color. ## Syntax: Spires, Courtyards And Brick Open a file and the town fills in, from the sky down to the roofs: - Keywords in cobalt spire [#425EB8](https://codigrate.com/tools/color/425EB8), set in bold. They are the most frequent colored words in any file, and the weight does the work a louder color would do in another theme, so the shape of each line shows without shouting. - Strings, numbers and escapes in amethyst [#81549C](https://codigrate.com/tools/color/81549C), the one violet in the theme and the clearest step away from the blue. - Methods and fields in harbor blue [#377CC1](https://codigrate.com/tools/color/377CC1), and JavaScript member functions in a lighter tone of it [#3F8CC3](https://codigrate.com/tools/color/3F8CC3). - Local variables in spruce green [#1E7857](https://codigrate.com/tools/color/1E7857), and static members in a softer courtyard green [#548A64](https://codigrate.com/tools/color/548A64), the trees of the Old Town gardens in winter. - Parameters in brick [#B6564B](https://codigrate.com/tools/color/B6564B), and HTML and XML tags in weathered brick [#B1544B](https://codigrate.com/tools/color/B1544B), set in bold, the roofs and the walls. - Global variables in a rust [#91473A](https://codigrate.com/tools/color/91473A), annotations in old brass [#8E6433](https://codigrate.com/tools/color/8E6433), and attributes in a slate blue [#6584AC](https://codigrate.com/tools/color/6584AC). Class names, function names, types and constants stay a near black ink [#131B25](https://codigrate.com/tools/color/131B25) at about 15:1, the darkest color in the theme. Leaving the names uncolored keeps a Tallinn file quiet. The eye reads the structure first, keyword, name, value, and the greens, violets and bricks only appear where a value, a member or an input is waiting to be found. ## The Final Product Here is Tallinn whole again, on the platforms it ships for. The Baltic morning blues and the midnight ink text read the same in a JetBrains IDE and in Sublime Text, Slack and Ghostty keep that cold, clear light around the rest of the desk, and Rhino carries it into its viewports.
Tallinn theme in a JetBrains IDE
JetBrains
Tallinn theme in Sublime Text
Sublime Text
Tallinn theme in Slack
Slack
Tallinn theme in Ghostty
Ghostty
Tallinn theme in Rhino
Rhino
## Reading It Back Taken apart, Tallinn is a cold sky over a red town. The whites share one Baltic blue so the code has a calm page to sit on. The language itself is drawn in cobalt and set in bold, the values in amethyst, the members in harbor blue and the variables in the greens of the courtyards, and the red of the roofs is kept for the parameters and tags you look for. One pink tab marks where you are, the comments fade into limestone grey, and the names stay a dark ink so nothing fights the structure. It suits a bright room on a short winter day, which is also when the real city looks most like this, the sun low over the Gulf of Finland and the snow on the roofs taking the color of the sky. Tallinn installs free on JetBrains, VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from its [theme page](https://codigrate.com/theme?product=tallinn). ## Frequently Asked Questions ### What is the Tallinn theme? Tallinn is one of Codigrate's light city themes, built around the Estonian capital on a winter morning: pale limestone walls, red tile roofs under snow and a low Baltic sun. The editor is a cool porcelain white instead of a plain white, the text is a midnight blue ink instead of black, and the code is painted in the colors of the Old Town: cobalt for keywords, amethyst for strings, harbor blue for members, spruce and courtyard greens for variables and static members, and the red of old brick for parameters and tags. ### Why are the Tallinn backgrounds blue instead of white? Because the whole frame is built from one cold light. The editor #EDF2FA, the tool windows #D0DCEF and the outer frame #A9B9DA share a hue near 217 degrees and differ only in lightness, the color snow takes when the sun stays low and the sky does the lighting. The keywords, the interface text, the caret and the line numbers sit on the same blue, so the code looks like it belongs to the page, and the panels separate by a soft step in depth rather than by drawn lines. ### How are the syntax colors chosen in Tallinn? They follow the Old Town from the sky down to the roofs. Keywords are a bold cobalt, the color of the spires against a winter sky, and strings and numbers are a muted amethyst. Methods and fields are a harbor blue, local variables a spruce green and static members a courtyard green. The warm notes are the brick: a red for parameters, a weathered brick for tags, a rust for global variables and an old brass for annotations. Class and function names stay a near black ink, and comments drop to an italic slate grey. ### Is a pale blue light theme comfortable for long coding sessions? In a bright room, yes. Code is a midnight blue #0F244F at about 13.5:1 against the editor and names are a near black at about 15:1, so the page reads firmly without the hard edge of pure black on pure white. The blue cast takes the glare off the background, keywords are bold so the structure of a line shows at a glance, and the only strong warm color in the frame is the open tab, so nothing around the code pulls at the eye. --- # Anatomy of a Dark Theme: Tokyo > Anatomy of Tokyo, a dark IDE theme: an indigo night editor lit by neon violet and pink, crisp cyan strings, matcha green and the amber of paper lanterns. - URL: https://codigrate.com/blog/anatomy-of-the-tokyo-theme - Published: 2026-10-05 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Tokyo](https://codigrate.com/theme?product=tokyo) - Publisher: Codigrate (https://codigrate.com) Tokyo's night was blue long before it was neon. When the British chemist Robert William Atkinson arrived in 1874 to teach at the school that became the University of Tokyo, the city he walked through was dressed in one dye: work coats, shop curtains, towels and banners, nearly all of it indigo. He is credited with the name the color still carries abroad, Japan Blue. A century and a half later, when Tokyo picked the emblem for its 2020 Games, a ring of checkered rectangles, it was printed in the same indigo. Codigrate's Tokyo theme builds its night on that blue and then switches the signs on. The dark is indigo, the light is violet, pink and cyan, and the few warm colors are the paper lanterns of the side streets. What follows takes it apart color by color. It is the fifth city in this series after [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme), [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme) and [Rio de Janeiro](https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme), and the second neon night after Miami, cool where Miami ran hot. ## A City Dyed In One Blue The theme's own description reads like a walk at midnight: neon side streets, the skyline after dark, the quiet glow of alleys lined with lanterns. Deep indigo shadows and electric violet highlights, moody blues to keep the editor calm, and luminous purples, soft lilacs and crisp cyan for the code. What the description does not say is how much of that is one color. The backgrounds, the keywords, the caret, the line numbers, the accent and the interface text all sit on the same indigo hue, around 229 degrees, and differ only in how light they are. A Shibuya blue [#7285DC](https://codigrate.com/tools/color/7285DC) runs through the interface as the accent, and from there the night is a single dye at many depths. The neon is laid on top of it: a neon violet [#967AEA](https://codigrate.com/tools/color/967AEA), a pink neon [#ECA1EB](https://codigrate.com/tools/color/ECA1EB), a cyan sign [#5DC8D6](https://codigrate.com/tools/color/5DC8D6) and a matcha green [#5CC19D](https://codigrate.com/tools/color/5CC19D). ## The Harmony: Neon On Both Sides Of Indigo Put the colors on a wheel and the indigo sits in the middle of a long cool arc. On one side the neon runs toward violet and magenta: the ultraviolet of the progress bar near 255 degrees, the purple selection near 296, the pink neon of methods and fields at 301. On the other side it runs toward the water and the parks: skyline blue at 219, the cyan sign at 187, matcha at 159. That is an [analogous](https://codigrate.com/blog/introduction-to-color-harmony) spread, a street of signs that all agree on the temperature. The warm colors stand on the far side of the wheel. The paper lantern gold of static members sits near 34 degrees and the amber sign of parameters near 18, almost straight across from the indigo at 229, a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair. There are only a handful of them. In a street of cold neon a single warm lantern is the thing you look at, and in a Tokyo file the warm tokens are the ones you go looking for: the inputs of a function and the members that belong to a class rather than to an instance. ## Backgrounds, Dipped In Indigo Japanese dyers have a name for every depth of indigo. The palest, a cloth barely shown to the vat, is kamenozoki, a glance into the jar. The darkest, dipped again and again until it reads as black, is kachiiro, worn by samurai because its name sounds like the word for winning. Tokyo's backgrounds are four steps from the dark end of that range, all on the same hue near 229 degrees: - Input [#0C0F1C](https://codigrate.com/tools/color/0C0F1C), a night alley, the darkest well, where you type into search fields and dialogs. - Editor [#1A1F35](https://codigrate.com/tools/color/1A1F35), Tokyo midnight, the blue the code is written on. - Window [#2A3051](https://codigrate.com/tools/color/2A3051), an indigo district for the tool windows and panels. - Surface [#323B66](https://codigrate.com/tools/color/323B66), the outer frame the whole window sits in. None of them is black and none is grey. Each is the same dye at a different strength, so the panels separate by depth rather than by drawn lines. A selected row in the project tree stays in the vat too, a deeper indigo [#354172](https://codigrate.com/tools/color/354172) edged in [#4758A9](https://codigrate.com/tools/color/4758A9). The neon starts at the edges of your attention. Selected text in the editor turns purple [#5E3061](https://codigrate.com/tools/color/5E3061), the active editor tab sits on a purple alley [#542D58](https://codigrate.com/tools/color/542D58) with a neon purple underline [#8E2795](https://codigrate.com/tools/color/8E2795), search matches light up in neon violet [#967AEA](https://codigrate.com/tools/color/967AEA), and the progress bar runs in ultraviolet [#714CE3](https://codigrate.com/tools/color/714CE3). Whatever tells you where you are, what you picked or what you found glows violet. Everything else stays indigo. ## One Foreground, Several Voices Code is written in a near white [#EBEBEC](https://codigrate.com/tools/color/EBEBEC) at about 14:1 against the editor, the brightest color in the theme and the only one that steps fully out of the blue. The interface text around it is a streetlight silver [#AEB2C3](https://codigrate.com/tools/color/AEB2C3), the same indigo with most of the color drained out, and one level down a duller [#858EB7](https://codigrate.com/tools/color/858EB7), so labels and hints read as the same street at a lower light. Comments step back into a slate [#8295B1](https://codigrate.com/tools/color/8295B1) at around 5:1, set in italics. Its hue sits a few degrees off the indigo, a touch toward cyan, which is enough to read as a different voice without leaving the family. That is the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): the code you act on reads first, the notes about it second. The gutter is dyed in the vat as well. The caret is a pale indigo [#939ED3](https://codigrate.com/tools/color/939ED3), the line numbers a muted [#7982B0](https://codigrate.com/tools/color/7982B0), and the number on the current line lifts to a stronger [#7B8AD1](https://codigrate.com/tools/color/7B8AD1), so the left edge of the editor is the same blue as the page, lit a little where you are. ## Syntax: Signs And Lanterns Open a file and the street fills in: - Keywords in metro indigo [#7B89C8](https://codigrate.com/tools/color/7B89C8), the background's own hue lifted toward the light. They are the most frequent colored words in any file and the quietest syntax color in the theme, under 5:1, so the grammar of the language reads as part of the night, not as a sign. - Strings and numbers in a cyan sign [#5DC8D6](https://codigrate.com/tools/color/5DC8D6), the clearest cool color in the editor. - Methods and fields in pink neon [#ECA1EB](https://codigrate.com/tools/color/ECA1EB), and JavaScript member functions in a deeper magenta [#E47DC0](https://codigrate.com/tools/color/E47DC0), the signs above the doors. - Local variables in matcha neon [#5CC19D](https://codigrate.com/tools/color/5CC19D), and global variables in a pale lime [#A3C683](https://codigrate.com/tools/color/A3C683). - Tags in skyline blue [#7FA0DD](https://codigrate.com/tools/color/7FA0DD), the glass towers over the street. - Parameters in an amber sign [#DD9B7F](https://codigrate.com/tools/color/DD9B7F), and static members in an italic paper lantern [#D3B690](https://codigrate.com/tools/color/D3B690), the two warm lights in the alley. - Attributes in a rose [#D5839C](https://codigrate.com/tools/color/D5839C), and annotations in a soft pink [#DC9DA6](https://codigrate.com/tools/color/DC9DA6). Class names, function names and constants stay a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0) at about 12:1. With the names left white and the keywords left indigo, the structure of a file reads in two quiet tones, and the color arrives only on the values, the members and the inputs you actually need to find. ## The Final Product This is Tokyo put back together. The indigo night fills a JetBrains IDE and Sublime Text, Slack and Ghostty bring the same city after dark to the chat and the shell, and in Rhino the viewports take on the same deep blue.
Tokyo theme in a JetBrains IDE
JetBrains
Tokyo theme in Sublime Text
Sublime Text
Tokyo theme in Slack
Slack
Tokyo theme in Ghostty
Ghostty
Tokyo theme in Rhino
Rhino
## Reading It Back Taken apart, Tokyo is one dye and a handful of signs. The backgrounds, keywords, gutter and interface are all the same indigo at different depths, so the frame never competes with the code. The violets mark where you are and what you have selected. The pinks, cyans and greens are the neon on the members, the values and the local names, and the two warm lanterns, amber and paper gold, are kept for parameters and static members. The names stay near white and the comments step back into slate. It suits a dark room late at night, which is also when the real city looks like this, the towers lit blue and the side streets glowing pink and gold below them. Tokyo installs free on JetBrains, VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from its [theme page](https://codigrate.com/theme?product=tokyo). ## Frequently Asked Questions ### What is the Tokyo theme? Tokyo is one of Codigrate's dark city themes, built around Tokyo after midnight: indigo streets, glass towers, neon signs and the paper lanterns of the side alleys. The editor is a deep indigo instead of black, the frame around it is the same blue at lighter depths, and the code is lit by the signs: a pink neon for methods and fields, a cyan for strings, a matcha green for local variables, and an amber and a paper lantern gold for parameters and static members. It reads like a late walk through the city rather than a plain dark mode. ### Why is the Tokyo background blue instead of black? Because the whole theme is dyed in one indigo. The input wells #0C0F1C, the editor #1A1F35, the tool windows #2A3051 and the outer frame #323B66 share a hue near 229 degrees, the Japan Blue that dressed the city's work coats and shop curtains in the nineteenth century, and so do the keywords, the caret, the line numbers and the accent. The panels separate by depth rather than by drawn lines, and the neon on top reads brighter against a blue night than against a flat black. ### How are the syntax colors chosen in Tokyo? They follow a street at night. Keywords are the indigo of the background lifted toward the light, so the language itself stays quiet. The neon carries the code: pink for methods and fields, cyan for strings and numbers, matcha green for local variables, a pale lime for globals and a skyline blue for tags. Two warm lights are kept for the tokens you search for, an amber for parameters and an italic paper lantern gold for static members. Class and function names stay a light grey, and comments drop to an italic slate. ### Is Tokyo easy on the eyes for long coding sessions? In a dim room, yes. Code is a near white #EBEBEC at about 14:1 against the indigo editor and names are a light grey at about 12:1, firm without the glare of pure white on pure black. The frame is one hue at a few depths, so nothing around the code pulls at the eye, and keywords, the most frequent colored words, are the quietest syntax color at under 5:1. The brightest neon is spent on small tokens rather than on large areas. --- # Anatomy of a Light Theme: Rio de Janeiro > Anatomy of Rio de Janeiro, a light IDE theme: minty morning backgrounds, a forest ink foreground, and syntax in rainforest green, bay blue and samba gold. - URL: https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme - Published: 2026-10-04 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Rio de Janeiro](https://codigrate.com/theme?product=rio-de-janeiro) - Premium themes with a similar palette: [Dublin](https://codigrate.com/theme?product=dublin) - Publisher: Codigrate (https://codigrate.com) The most photographed pavement in the world started as a copy. The black and white waves along Copacabana were laid in the early 1900s by workers brought over from Portugal, after a pattern already set into a square in Lisbon. In 1970 the landscape architect Roberto Burle Marx redrew the whole avenue: he turned the waves to run with the shore and covered the opposite sidewalk in abstract mosaics. Burle Marx was also the gardener who taught Brazil to plant its own forest instead of European flower beds, and Rio's colors, in his hands, were green first. Codigrate's Rio de Janeiro theme starts from the same idea. The light is a pale mint, the text is the green of the hills, and the blues and golds of the beach are spent as accents. What follows takes it apart color by color. It is the fourth city in this series after [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme) and [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme), and the light sibling of Istanbul, which found its city in the water where Rio finds it in the trees. ## A City Between Forest And Sea The theme's own description sets the brief: lush hills, soft morning light and ocean air, airy minty backgrounds with confident rainforest greens and clean coastal blues. You can see both halves in the palette before a file is open. The forest is the larger half. A rainforest green [#375B2E](https://codigrate.com/tools/color/375B2E) runs through the interface as the accent, an emerald palm [#13A166](https://codigrate.com/tools/color/13A166) and a deep jungle [#028134](https://codigrate.com/tools/color/028134) carry most of the code, and the panels are all leaf. The sea is the other half: a Guanabara blue [#2287D5](https://codigrate.com/tools/color/2287D5), an Atlantic blue [#0A80B3](https://codigrate.com/tools/color/0A80B3) and a bay blue [#1065B8](https://codigrate.com/tools/color/1065B8), the bay seen from the hills in the morning. Between them sit the beach and the carnival, a golden samba [#A3860A](https://codigrate.com/tools/color/A3860A) and an Ipanema sun [#ECDA61](https://codigrate.com/tools/color/ECDA61). ## The Harmony: From The Hills Down To The Water Put the colors on a wheel and most of them run in one long cool arc. The leafy greens and the backgrounds sit around 104 to 111 degrees, the emerald and the jungle green at 144 to 155, the lagoon teal at 180, the blues between 198 and 210. That is an [analogous](https://codigrate.com/blog/introduction-to-color-harmony) run from leaf to sea, the way the view from Corcovado falls from forest to water without a break. The warm colors stand just outside it. The samba gold sits near 50 degrees and the sandy caramel of the parameters near 30, on the [warm](https://codigrate.com/blog/warm-and-cool-colors) side of the green. Gold against bay blue is about 160 degrees apart, close to a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair: the sun on the water. Because only a few tokens wear it, the gold reads as light catching the page rather than a second theme fighting the first. ## Backgrounds, Grown From Leaf A light theme lives on its whites, and Rio's are not plain white. Three of them share the same leafy hue, around 106 degrees, and only the lightness moves: - Editor [#F7FAF6](https://codigrate.com/tools/color/F7FAF6), a morning breeze white the code is written on, the brightest of the set. - Window [#D9EFD2](https://codigrate.com/tools/color/D9EFD2), a palm shade for the tool windows, tabs and panels. - Surface [#85B778](https://codigrate.com/tools/color/85B778), a jungle canopy for the outer frame the whole window sits in. Input fields sit on a pure white [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), one step brighter than the editor, so the place you type always reads as the front of the window. The gutter is a paler wash of [#EEF6EB](https://codigrate.com/tools/color/EEF6EB) and the current line lifts to [#E1F3DD](https://codigrate.com/tools/color/E1F3DD). Selection stays green: selected text turns a sage [#CADFC2](https://codigrate.com/tools/color/CADFC2), and a selected row in the project tree turns a garden path [#B8E5AD](https://codigrate.com/tools/color/B8E5AD) edged in a vivid leaf [#47A731](https://codigrate.com/tools/color/47A731). The one break is the open tab. The active editor tab sits on a lagoon mist [#D0ECEF](https://codigrate.com/tools/color/D0ECEF) with a tropical water underline [#41AFBA](https://codigrate.com/tools/color/41AFBA). In a room built entirely from leaf, that single pool of cool water tells you where you are at a glance, the way Istanbul used its one warm parchment tab in a room full of turquoise. Search matches get the sun, an Ipanema yellow [#ECDA61](https://codigrate.com/tools/color/ECDA61), and the progress bar runs in Guanabara blue. ## One Foreground, Several Voices The text is not black. Code is written in a forest ink [#1A510A](https://codigrate.com/tools/color/1A510A), a green so deep it only shows its color next to a true black, at about 9:1 against the editor. The interface text around it lifts to a leaf shadow [#2D7B18](https://codigrate.com/tools/color/2D7B18) at about 5:1, the same hue one step lighter, so labels and hints come from the same family as the code. Comments step back by color instead of by fading out. They are an olive grey [#828564](https://codigrate.com/tools/color/828564) at around 3.6:1, the dullest color in the file, a dry leaf among fresh ones. That is the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): the code you act on reads first, the notes about it read second. The small parts of the editor stay in character as well. The caret is a fern green [#4A873F](https://codigrate.com/tools/color/4A873F), the line numbers a grey green [#7FA078](https://codigrate.com/tools/color/7FA078), and the number on the current line darkens to [#236215](https://codigrate.com/tools/color/236215), so your place in the gutter is marked by depth, not by a new color. ## Syntax: Forest, Bay And Carnival Open a file and the city fills in, from the hills down to the beach: - Keywords, modifiers and booleans in emerald palm [#13A166](https://codigrate.com/tools/color/13A166), the most frequent colored words in any file, in the brightest of the forest greens. - Strings, numbers and attribute values in deep jungle [#028134](https://codigrate.com/tools/color/028134), a darker, bluer green, the shade under the canopy. - Variables in a lagoon teal [#078A8A](https://codigrate.com/tools/color/078A8A), where the forest meets the water at Rodrigo de Freitas. - Static members in Atlantic blue [#0A80B3](https://codigrate.com/tools/color/0A80B3), and tags and CSS selectors in bay blue [#1065B8](https://codigrate.com/tools/color/1065B8), the open water past the Sugarloaf. - Methods, fields and properties in golden samba [#A3860A](https://codigrate.com/tools/color/A3860A), and attributes in a deeper gold [#9C830D](https://codigrate.com/tools/color/9C830D), the brass of a carnival band. - Parameters in a sandy caramel [#BC8650](https://codigrate.com/tools/color/BC8650), the beach in the afternoon, warm and easy to spot where a function takes its input. - Global variables in a palm green [#42875B](https://codigrate.com/tools/color/42875B), and annotations in a moss [#739E4B](https://codigrate.com/tools/color/739E4B). Class names, function names, types, constants and operators stay a near black ink [#131B25](https://codigrate.com/tools/color/131B25) at about 16:1, the darkest color in the theme. Leaving the names uncolored is what keeps a Rio file calm. The eye takes in the shape of a line first, keyword, name, value, and the greens, blues and golds only land where they mean something. ## The Final Product Here is Rio de Janeiro assembled. The minty morning backgrounds and the forest ink text hold in a JetBrains IDE and in Sublime Text, Slack and Ghostty carry the same green light into the chat and the shell, and Rhino picks it up in its panels.
Rio de Janeiro theme in a JetBrains IDE
JetBrains
Rio de Janeiro theme in Sublime Text
Sublime Text
Rio de Janeiro theme in Slack
Slack
Rio de Janeiro theme in Ghostty
Ghostty
Rio de Janeiro theme in Rhino
Rhino
## Reading It Back Taken apart, Rio de Janeiro is a garden with a view of the sea. The whites share one leafy hue so the greens have somewhere to grow. The language itself is painted in the forest, emerald for keywords and jungle green for values, the blues of the bay are kept for variables, statics and tags, and the gold and sand of the beach mark the methods and the parameters you look for. The one cool tab marks where you are, the comments step back into an olive grey, and the names stay a dark ink so nothing fights the structure. It suits a bright room and an early start, which is also when the real city looks most like this, the mist lifting off the hills and the light coming up over the bay. Rio de Janeiro installs free on JetBrains, VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from its [theme page](https://codigrate.com/theme?product=rio-de-janeiro). ## Frequently Asked Questions ### What is the Rio de Janeiro theme? Rio de Janeiro is one of Codigrate's light city themes, built around the city in the early morning: green hills straight out of the sea, soft light on the bay and the smell of salt in the air. The editor is a pale mint white instead of a plain white, the text is a deep forest green instead of black, and the code is painted in the colors of the place: emerald and jungle greens for the language itself, bay and Atlantic blues for the water, and a samba gold and a sandy caramel for the warm accents. It reads like a walk under the palms by the beach rather than a plain light mode. ### Why are the Rio de Janeiro backgrounds green instead of white? Because the whole theme is built around a green city. Rio's light comes from one leafy hue, around 106 degrees: the editor is a morning breeze white #F7FAF6, the tool windows a palm shade #D9EFD2 and the outer frame a jungle canopy #85B778. The greens in the code share that hue, so the syntax looks like it grew out of the page, and the panels separate by a soft step in lightness rather than by drawn lines. ### How are the syntax colors chosen in Rio de Janeiro? They follow the city from the hills down to the sea. Keywords are an emerald palm green and strings a deep jungle green, variables a lagoon teal, static members an Atlantic blue and tags a bay blue. The warm notes are the beach and the carnival: a samba gold for methods and fields, and a sandy caramel for parameters. Names such as classes and functions stay a near black ink, and comments drop to an olive grey, so the structure of a line is clear before the color is. ### Is a green light theme comfortable for long coding sessions? In a bright room, yes. The editor text is a forest ink #1A510A at about 9:1 against the mint white background, and class and function names are a near black at about 16:1, so the page reads firmly without the hard edge of pure black on pure white. Green sits in the middle of what the eye handles best, and the theme keeps its brightest colors, the gold and the blues, for small accents rather than large areas. In a dim room a dark theme will still feel softer. --- # Anatomy of a Dark Theme: Paris > Anatomy of Paris, a dark IDE theme: a plum espresso editor under dusty rose and macaron pinks, warmed by champagne gold and cooled by a twilight blue. - URL: https://codigrate.com/blog/anatomy-of-the-paris-theme - Published: 2026-10-03 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Paris](https://codigrate.com/theme?product=paris) - Premium themes with a similar palette: [Vienna](https://codigrate.com/theme?product=vienna) - Publisher: Codigrate (https://codigrate.com) The Eiffel Tower has not always glowed gold at night. For decades it was lit from below by floodlights, a pale shape against the dark. On the last evening of 1985 that changed: the lighting designer Pierre Bideau put a set of sodium lamps inside the frame itself, and the tower started to shine from within in a warm amber that made the iron look like it was made of light. Since the year 2000 it also sparkles, twenty thousand small bulbs flashing for five minutes at the top of every hour after dark. Codigrate's Paris theme lives in that hour. The sun is gone behind the rooftops, the sky over the Seine has turned a soft rose and then a deep plum, and the warm lights are coming on one window at a time. What follows takes it apart color by color. It is the third city in this series, after the neon night of [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme) and the bright tiles of [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme), and it is the quietest of the three. ## Rose Instead Of Champagne The theme's own description is unusually specific about what it chose not to do. It trades bright champagne for dusty rose accents over calm plum espresso tones. That is the whole idea in one line: the obvious Paris palette is gold and cream and sparkle, and this one keeps the gold in reserve and lets the rose do the talking. You can see the choice in the palette before a file is open. The accent that runs through the interface is a powdered blush [#D18FA8](https://codigrate.com/tools/color/D18FA8). The code is carried by a Montmartre rose [#D584A3](https://codigrate.com/tools/color/D584A3), a cherry macaron [#DF7583](https://codigrate.com/tools/color/DF7583) and a peach macaron [#F3B7A9](https://codigrate.com/tools/color/F3B7A9), the colors of a pastry shop window more than a postcard. The gold is still there, a champagne gold [#F1C970](https://codigrate.com/tools/color/F1C970) and the warmer café lights [#FBBA77](https://codigrate.com/tools/color/FBBA77), but it is spent on a few tokens, not on the whole room. ## The Harmony: A Warm Sweep And One Blue Put the colors on a wheel and most of them sit in one long arc. The roses and the backgrounds gather between roughly 333 and 352 degrees, the peach macaron sits at 11, the café lights at 30 and the champagne gold at 41. That is a single [analogous](https://codigrate.com/blog/introduction-to-color-harmony) sweep, from rose through peach to gold, the way the sky over the river fades from pink near the horizon to amber around the streetlamps. Then there is one cool color, and it is placed with care. The twilight blue [#87A1D3](https://codigrate.com/tools/color/87A1D3) sits at 219 degrees, almost exactly opposite the champagne gold at 41. Gold against blue is about 178 degrees apart, a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair, and it is the pair you see at blue hour on any Paris bridge: lit windows against the last of the sky. Because only one blue is allowed in, it never competes with the roses. It just makes them look [warmer](https://codigrate.com/blog/warm-and-cool-colors) by standing next to them. ## Backgrounds, Mixed From Plum A dark theme lives on its near blacks, and Paris's are not black at all. All four sit on the same dusky rose hue, around 335 degrees, and only the lightness moves: - Input [#100D0E](https://codigrate.com/tools/color/100D0E), an ink noir, the darkest well, where you type into search fields and dialogs. - Editor [#281D22](https://codigrate.com/tools/color/281D22), the Parisian night the code is written on, a plum so deep it reads as espresso. - Window [#4F303C](https://codigrate.com/tools/color/4F303C), a cabaret shadow for the tool windows and panels. - Surface [#6A3C4D](https://codigrate.com/tools/color/6A3C4D), a rosewood for the outer frame the whole window sits in. The gutter drops a step below the editor to [#1C1719](https://codigrate.com/tools/color/1C1719), and the current line lifts to a muted plum [#4C3943](https://codigrate.com/tools/color/4C3943). Selection stays in the family too: selected text in the editor turns a deep wine [#722832](https://codigrate.com/tools/color/722832), and a selected row in the project tree turns a mauve salon [#5D3F49](https://codigrate.com/tools/color/5D3F49). Unlike Miami and Istanbul, Paris does not break the room for the open tab. The active editor tab sits on a wine cellar [#532D33](https://codigrate.com/tools/color/532D33) with a Bordeaux underline [#994753](https://codigrate.com/tools/color/994753), the same family one shade redder. The one cool light in the interface is the progress bar, which runs in a Seine blue [#5E7BB3](https://codigrate.com/tools/color/5E7BB3), the river glimpsed between buildings. ## One Foreground, Several Voices The text is not pure white. Code is written in an ivory lace [#E6D7DD](https://codigrate.com/tools/color/E6D7DD), a white with a little rose in it, at about 12:1 against the editor. That is plenty to read all evening, and softer than pure white on a dark screen. The interface text around it drops to a rose smoke [#C79FAE](https://codigrate.com/tools/color/C79FAE) at about 7:1, so labels, menus and secondary lines come from the same warm family as the code. Comments break the pattern on purpose. They are a blue grey [#89909F](https://codigrate.com/tools/color/89909F) at around 5:1, the only cool neutral in the theme. Among so many warm tones that coolness alone is enough to push your notes behind the code, the same trick Miami played with its lavender grey. It is the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability), with temperature doing part of the work that brightness usually does. The small parts of the editor stay in character as well. The caret is a dusty pink [#C38AA4](https://codigrate.com/tools/color/C38AA4), the line numbers are a muted mauve [#9B7E8B](https://codigrate.com/tools/color/9B7E8B), and the number on the current line lifts to a brighter rose [#C791AA](https://codigrate.com/tools/color/C791AA), so your place in the gutter is marked without a new color. ## Syntax: Pastry Window And Streetlamps Open a file and the evening fills in: - Keywords, modifiers and booleans in Montmartre rose [#D584A3](https://codigrate.com/tools/color/D584A3), the most frequent colored words in any file, in the color the whole theme is built on. - Strings, numbers and attribute values in cherry macaron [#DF7583](https://codigrate.com/tools/color/DF7583), a shade redder and easy to find. - Methods, fields and properties in peach macaron [#F3B7A9](https://codigrate.com/tools/color/F3B7A9), the lightest of the pinks, for the things your code calls and reads. - Parameters in champagne gold [#F1C970](https://codigrate.com/tools/color/F1C970) and global variables in café lights [#FBBA77](https://codigrate.com/tools/color/FBBA77), the two golds the theme held back, spent where a value enters or leaves a function. - Variables in twilight blue [#87A1D3](https://codigrate.com/tools/color/87A1D3), the one cool color in the code, the sky over the river. - Attributes in a limestone cream [#DDBF98](https://codigrate.com/tools/color/DDBF98), the stone of the Haussmann facades, and static members in a pale gilt [#DCC79D](https://codigrate.com/tools/color/DCC79D). - Annotations in a pale linden green [#CED390](https://codigrate.com/tools/color/CED390), and tags and CSS selectors in a soft stone [#D6CFC1](https://codigrate.com/tools/color/D6CFC1). Class names, function names, types, constants and operators stay a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0) at about 12:1. Leaving the names uncolored is what keeps a Paris file calm. The eye takes in the shape of a line first, keyword, name, value, and the roses and golds only land where they have something to say. ## The Final Product Put back together, Paris looks like this. The plum espresso editor fills a JetBrains IDE and Sublime Text, Slack and Ghostty keep the same evening around the chat and the shell, and Rhino stays open late with them, like a café on a side street.
Paris theme in a JetBrains IDE
JetBrains
Paris theme in Sublime Text
Sublime Text
Paris theme in Slack
Slack
Paris theme in Ghostty
Ghostty
Paris theme in Rhino
Rhino
## Reading It Back Taken apart, Paris is a theme of restraint. The darks share one plum hue so the roses have somewhere to sit. The palette runs in a single warm sweep from rose to gold, and the gold, the color everyone expects from Paris, is kept for parameters and globals instead of being poured over everything. One twilight blue answers it from the other side of the wheel, the comments step back by temperature, and even the open tab stays in the family of wine. It suits a dim room and a long evening, which is also when the real city looks like this, the tower lit from inside and the river going dark below it. Paris installs free on JetBrains, VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from its [theme page](https://codigrate.com/theme?product=paris). ## Frequently Asked Questions ### What is the Paris theme? Paris is one of Codigrate's dark city themes, built around Paris in the last light of the evening, when the boulevards go rose and the café windows come on. The editor is a deep plum espresso instead of a neutral charcoal, and the colors on it come from the city at dusk: a Montmartre rose for keywords, a cherry macaron for strings, a peach macaron for methods and fields, champagne gold and café lights for the warm accents, and a twilight blue off the Seine for variables. It reads like an evening walk along the river rather than a plain dark mode. ### Why is the Paris background plum instead of black or grey? Because a flat charcoal would make the roses look pasted on. Paris builds every dark from one dusky rose hue, around 335 degrees: the input wells at #100D0E, the editor at #281D22, the tool windows at #4F303C and the outer frame at #6A3C4D. The pinks on top share that undertone, so the syntax sits in the room instead of floating over it, and the panels separate by a clear step in lightness rather than by drawn lines. ### How are the syntax colors chosen in Paris? They run in one warm sweep with a single cool answer. The warm side moves from rose to gold: Montmartre rose for keywords, cherry macaron for strings and numbers, peach macaron for methods and fields, café lights for global variables and champagne gold for parameters. The cool side is the Seine at blue hour: a twilight blue for variables and a blue grey for comments. Names such as classes and functions stay a plain light grey, so the structure of a line is clear before the color is. ### How is Paris different from the Miami theme? Both are dark city themes built on a rose tinted near black, but they are opposite moods. Miami is loud: a hot neon pink accent, an electric aqua and a bright golden sand, with a teal tab that breaks the room on purpose. Paris is quiet: its pinks are dusty and powdery, its gold is champagne rather than neon, its active tab stays in the same wine family, and only one cool blue is allowed in. Miami is a night out on Ocean Drive; Paris is the walk home along the river. --- # Anatomy of a Light Theme: Istanbul > Anatomy of Istanbul, a light IDE theme: marble white backgrounds, a midnight teal foreground, and syntax in Iznik turquoise, rooftop red and bazaar copper. - URL: https://codigrate.com/blog/anatomy-of-the-istanbul-theme - Published: 2026-10-02 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Istanbul](https://codigrate.com/theme?product=istanbul) - Premium themes with a similar palette: [Sydney](https://codigrate.com/theme?product=sydney) - Publisher: Codigrate (https://codigrate.com) The most famous blue in Istanbul was made a hundred kilometers away. In the sixteenth century the potters of Iznik, a lake town southeast of the city, fired tiles for the imperial mosques: white grounds under a clear glaze, painted in cobalt, turquoise and sage, and from around the 1550s in a red so thick it stands up from the surface when you run a finger over it. Whole interiors went up in those tiles. The Blue Mosque alone carries more than twenty thousand of them, and the small Rüstem Pasha Mosque near the spice market is tiled almost to the ceiling. Codigrate's Istanbul theme takes that tile and holds it up to daylight. The white is the glaze, the turquoise is the water outside the window, and the reds and coppers are the roofs and the bazaar across the Golden Horn. What follows takes it apart color by color. It is the second city in this series after the neon night of [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), and the light answer to it, closer in spirit to the bright mornings of [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme) and [Sakura](https://codigrate.com/blog/anatomy-of-the-sakura-theme). ## A City Of Water And Tile The theme's own description puts it in one sentence: soft daylight and sea breezes, calm turquoise tones with warm historical accents. You can see both halves in the palette before a file is open. The cool half is the water. A deep Bosphorus [#087E8E](https://codigrate.com/tools/color/087E8E) runs through the interface as the accent, a Bosphorus teal [#1190A1](https://codigrate.com/tools/color/1190A1) and a Marmara blue [#0887B5](https://codigrate.com/tools/color/0887B5) carry most of the code, and an Iznik turquoise [#12ACC1](https://codigrate.com/tools/color/12ACC1) lights the edges of whatever you select. The warm half is the old city: a rooftop red [#B8514D](https://codigrate.com/tools/color/B8514D), a copper bazaar [#B87958](https://codigrate.com/tools/color/B87958), a tulip pink [#C16979](https://codigrate.com/tools/color/C16979) and an Ottoman rose [#9C6E7C](https://codigrate.com/tools/color/9C6E7C), the colors of tiled roofs, hammered pans and the flower the Ottomans painted on everything. The light itself belongs to the water. Every background in the theme is the same teal, washed out until it is almost white. ## The Harmony: Turquoise Against Terracotta Put the colors on a wheel and they gather in two places. The teals sit tightly between roughly 185 and 196 degrees, with the cobalt of the variables a little further round at 223. The warm colors sit on the other side: the rooftop red near 2 degrees, the coppers between 21 and 27, the roses between 342 and 349. Teal against red is about 175 degrees apart, as close to a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair as a palette gets without being drawn with a ruler. It is the same pairing the Iznik painters relied on, turquoise and cobalt on white with a red to wake it up, and it works on a screen for the same reason it works on a wall. The red makes the teal look cooler, the teal makes the red look warmer, and neither has to be loud to be seen. The greens of the comments and static members, between 92 and 116 degrees, are the cypress trees in the courtyards: a third, quieter note that never competes with the other two. ## Backgrounds, Washed From Turquoise A light theme lives on its whites, and Istanbul's are not plain white. Three of them sit on the same teal hue, around 187 degrees, and only the lightness moves: - Editor [#FAFDFD](https://codigrate.com/tools/color/FAFDFD), the marble white the code is written on, the brightest of the set. - Window [#DBF0F1](https://codigrate.com/tools/color/DBF0F1), a Bosphorus mist for the tool windows, tabs and panels. - Surface [#91D1DA](https://codigrate.com/tools/color/91D1DA), a turquoise tile for the outer frame the whole window sits in. Input fields sit on a pure white [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), one step brighter than the editor, so the place you type always reads as the front of the window. The gutter is a pale wash of [#E7FAFA](https://codigrate.com/tools/color/E7FAFA) and the current line lifts to [#DEF0F3](https://codigrate.com/tools/color/DEF0F3), a change you feel more than see. Selection stays in the family: selected text turns a pale sea foam [#BADFDE](https://codigrate.com/tools/color/BADFDE), and a selected row in the project tree turns sea glass [#A3DDE5](https://codigrate.com/tools/color/A3DDE5) edged in Iznik turquoise. The one break is the open tab. The active editor tab sits on an old parchment [#EFEAD0](https://codigrate.com/tools/color/EFEAD0) with a golden horn underline [#C0AF43](https://codigrate.com/tools/color/C0AF43). In a room built entirely from cool tones, that single warm page tells you where you are at a glance, the way Miami used its one teal tab in a room full of pink. Search matches get their own color too, a lilac haze [#D5C5E1](https://codigrate.com/tools/color/D5C5E1), so a found word never looks like a selected one. ## One Foreground, Several Voices The text is not black. Code is written in a midnight strait [#083A41](https://codigrate.com/tools/color/083A41), a teal so deep it only shows its color next to a true black, at about 12:1 against the editor. That is plenty to read all day in a bright room, and softer than the hard edge of pure black on pure white. Secondary text in the interface lifts to [#0E6876](https://codigrate.com/tools/color/0E6876) at about 6:1, the same hue one step lighter, so labels and hints come from the same family as the code. Comments step back by color instead of by fading. They are a cypress green [#5FA652](https://codigrate.com/tools/color/5FA652), set low on purpose at about 3:1, the quietest color in any file. That is the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): the code you act on reads first, the notes about it read second, and the hue alone is enough to tell them apart. The small parts of the editor stay in character as well. The caret is a muted teal [#42858E](https://codigrate.com/tools/color/42858E), the line numbers are a grey teal [#7A9DA2](https://codigrate.com/tools/color/7A9DA2), and the number on the current line darkens to [#165C66](https://codigrate.com/tools/color/165C66), so your place in the gutter is marked by depth, not by a new color. ## Syntax: Tiles And Rooftops Open a file and both halves of the city show up at once: - Keywords, modifiers and booleans in Bosphorus teal [#1190A1](https://codigrate.com/tools/color/1190A1), the most frequent colored words in any file, in the color the whole theme is built on. - Strings, numbers and attribute values in Marmara blue [#0887B5](https://codigrate.com/tools/color/0887B5), a shade bluer and a touch stronger, the open sea beyond the strait. - Variables in a deep Iznik cobalt [#3E64C5](https://codigrate.com/tools/color/3E64C5), the one true blue in the palette, the color the tile painters used for their outlines. - Parameters in rooftop red [#B8514D](https://codigrate.com/tools/color/B8514D), the tiled roofs seen from the Galata Tower, warm and easy to spot where a function takes its input. - Methods, fields and properties in a dark copper [#AA784F](https://codigrate.com/tools/color/AA784F), and attributes in copper bazaar [#B87958](https://codigrate.com/tools/color/B87958), the pans hanging in the Grand Bazaar. - Tags and CSS selectors in tulip pink [#C16979](https://codigrate.com/tools/color/C16979), and annotations in Ottoman rose [#9C6E7C](https://codigrate.com/tools/color/9C6E7C). - Static members in cypress [#4A7A47](https://codigrate.com/tools/color/4A7A47) and global variables in a dusty olive [#687A58](https://codigrate.com/tools/color/687A58), the gardens behind the courtyard walls. Class names, function names, types, constants and operators stay a near black ink [#131B25](https://codigrate.com/tools/color/131B25) at about 17:1, the darkest color in the theme. Leaving the names uncolored is what keeps an Istanbul file calm. The eye takes in the shape of a line first, keyword, name, value, and the tile colors only land where they mean something. ## The Final Product Here is Istanbul whole again, on the apps it ships for. The marble whites and the midnight teal text read the same in a JetBrains IDE and in Sublime Text, Slack and Ghostty keep that bright morning light around the rest of the day, and Rhino takes it into the modeling viewports.
Istanbul theme in a JetBrains IDE
JetBrains
Istanbul theme in Sublime Text
Sublime Text
Istanbul theme in Slack
Slack
Istanbul theme in Ghostty
Ghostty
Istanbul theme in Rhino
Rhino
## Reading It Back Taken apart, Istanbul is a tiled wall in daylight. The whites share one teal hue so the turquoise has somewhere to sit. The language itself is painted in the water, teal for keywords and blue for values, while the warm reds, coppers and roses of the old city are kept for the parts of a line you look for: parameters, fields, tags. The one warm tab marks where you are, the comments step back in cypress green, and the names stay a dark ink so nothing fights the structure. It suits a bright room and a long day, which is also when the real city looks most like this, the light coming off the water and the domes across it. Istanbul installs free on JetBrains, VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from its [theme page](https://codigrate.com/theme?product=istanbul). ## Frequently Asked Questions ### What is the Istanbul theme? Istanbul is one of Codigrate's light city themes, built around the city by day: soft daylight on the water, a breeze off the Bosphorus and the tiles of the old mosques. The editor is a marble white with the faintest trace of teal in it, the text is a deep midnight teal instead of black, and the code is painted in the colors of the city: Iznik turquoise and Marmara blue for the language itself, rooftop red, copper and Ottoman rose for the warm accents, and a cypress green for comments. It reads like a bright morning by the water rather than a plain light mode. ### Why does the Istanbul theme use teal backgrounds instead of plain white? Because a flat white would leave the turquoise with nothing to belong to. Istanbul builds its light from one teal hue, around 187 degrees: the editor is a marble white #FAFDFD, the tool windows a Bosphorus mist #DBF0F1 and the outer frame a turquoise tile #91D1DA. The keywords, strings and accent on top share that hue, so the syntax looks like it grew out of the page, and the panels separate by a soft step in lightness rather than by drawn lines. ### How are the syntax colors chosen in Istanbul? They come in two families. The cool one is the water and the tiles: a Bosphorus teal for keywords, a Marmara blue for strings and numbers, and a deep Iznik cobalt for variables. The warm one is the old city: rooftop red for parameters, copper for methods, fields and attributes, tulip pink for tags and Ottoman rose for annotations. Names such as classes and functions stay a near black ink, and comments drop to a cypress green, so the structure of a line is clear before the color is. ### Is a light theme like Istanbul good for long coding sessions? In a bright room, yes. The editor text is a midnight teal #083A41 at about 12:1 against the marble white background, dark enough to read all day without the hard edge of pure black on pure white, and the names in your code are a near black ink at about 17:1. The syntax colors stay in a calm middle range rather than at screen primaries, which keeps a page full of keywords from flickering. In a dim room a dark theme will still feel softer, so many people keep Istanbul for daytime and switch at night. --- # Anatomy of a Dark Theme: Miami > Anatomy of Miami, a dark IDE theme: a raspberry black editor lit by neon pink and sunset coral, cooled by electric aqua, palm green and an art deco blue. - URL: https://codigrate.com/blog/anatomy-of-the-miami-theme - Published: 2026-09-29 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Miami](https://codigrate.com/theme?product=miami) - Premium themes with a similar palette: [Vienna](https://codigrate.com/theme?product=vienna) - Publisher: Codigrate (https://codigrate.com) The pink on Ocean Drive is younger than the buildings. When the Art Deco hotels of South Beach went up in the 1930s, most of them were white, cream and beige. The pastels came decades later, in the early 1980s, when the designer Leonard Horowitz drew up a palette of about forty colors from the sunset, the sunrise, the ocean in summer and in winter, and the sand, then tried it first on a plain white bakery at the corner of 7th and Washington. The city has been wearing its own sky ever since. Codigrate's Miami theme borrows from the same sky, only a little later in the evening. The sunset over Biscayne Bay is still there in the corals and the sand gold, but the sun is down, the neon is on and the room has gone dark. What follows takes it apart color by color. It is the first city in this series after six nature themes, and by some distance the loudest; the [CMYK post](https://codigrate.com/blog/cmyk) already read its pink, aqua and gold as a drawer of printing inks, and this one reads them as a place. ## Two Miamis In One Palette The theme's own description names both halves in one line: electric nights and pastel sunsets. You can see both in the palette before a single file is open. The pastel Miami is the sunset. A coral haze [#F2A4A0](https://codigrate.com/tools/color/F2A4A0), a sunset coral [#FE8078](https://codigrate.com/tools/color/FE8078), a golden sand [#F8D273](https://codigrate.com/tools/color/F8D273) and a pale art deco blue [#92B5E8](https://codigrate.com/tools/color/92B5E8), the kind of colors Horowitz put on the facades, soft and full of light. The electric Miami is the night. A hot Miami pink [#FF5FA2](https://codigrate.com/tools/color/FF5FA2) runs through the interface as the accent, a flamingo pink [#FE788C](https://codigrate.com/tools/color/FE788C) glows like a sign over a door, and an electric aqua [#00D1C1](https://codigrate.com/tools/color/00D1C1) sits in the code like a hotel pool lit after dark. The dark itself belongs to neither. It is the stretch between them, the few minutes after sunset when the clouds over the bay turn from pink to wine. ## The Harmony: Pink Against Teal Put the colors on a wheel and they gather in two places. The pinks, corals and the raspberry backgrounds crowd between roughly 325 and 5 degrees. The aquas and teals sit near 175 to 190, with the palm green a little before them and the art deco blue a little after. The two clusters are about 165 degrees apart, close to a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair. Pink against teal is the pairing Miami is known for, on the facades, on the tiles, in the neon over the entrances, and it works on a screen for the same reason it works on a building. Each color pushes the other further into itself: the coral reads warmer beside the aqua, and the aqua reads cooler beside the coral. The golden sand stands just outside both clusters at 43 degrees, which is why strings, the one family painted in it, are the easiest thing on the page to find. ## Backgrounds, Mixed From Wine A dark theme lives on its near blacks, and Miami's are not black at all. All four sit on the same raspberry hue, near 340 degrees, and only the lightness moves: - Input [#270D16](https://codigrate.com/tools/color/270D16), the darkest well, where you type into search fields and dialogs. - Editor [#33121D](https://codigrate.com/tools/color/33121D), the deep wine the code is written on. - Window [#532033](https://codigrate.com/tools/color/532033), a plum night for the tool windows and panels. - Surface [#5D263A](https://codigrate.com/tools/color/5D263A), the outer frame the whole window sits in. The step from editor to window is wide enough that the code reads as its own pane without a single border line. Selection stays in the family too: selected text in the editor turns a magenta plum [#5D224D](https://codigrate.com/tools/color/5D224D), and a selected row in the project tree turns berry [#722E47](https://codigrate.com/tools/color/722E47). The one break is the open tab. The active editor tab sits on a deep lagoon teal [#03534D](https://codigrate.com/tools/color/03534D) with a tropical teal underline [#059086](https://codigrate.com/tools/color/059086), and the progress bar runs in a bright teal [#17C7AC](https://codigrate.com/tools/color/17C7AC). In a room built entirely from warm tones, that single cool light tells you where you are at a glance. ## One Foreground, Several Voices The text is not pure white either. Code is written in a pearl [#E4E1E2](https://codigrate.com/tools/color/E4E1E2), a white with the faintest pink in it, at about 13:1 against the editor. That is plenty to read all night, and a step below the glare of pure white on a dark screen. The interface text around it is a pearl pink [#D5C6CE](https://codigrate.com/tools/color/D5C6CE) and, one level down, a dusty orchid [#CCA2B6](https://codigrate.com/tools/color/CCA2B6), so labels, menus and secondary lines all come from the same warm family. Comments break the pattern on purpose. They are a lavender grey [#928BAA](https://codigrate.com/tools/color/928BAA) at around 5:1, set in italics, and the only cool neutral in the whole theme. Among so many warm tones that coolness alone is enough to push your notes behind the code. It is the same ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability), with temperature doing part of the work that brightness usually does. The small parts of the editor stay in character as well. The caret is pink [#E17CBF](https://codigrate.com/tools/color/E17CBF), the line numbers are raspberry [#B9285E](https://codigrate.com/tools/color/B9285E), and the number on the current line lifts to a brighter [#CA3C72](https://codigrate.com/tools/color/CA3C72), so the gutter glows faintly, like a sign seen from down the street. ## Syntax: Neon And Tropics Open a file and both Miamis show up at once: - Keywords in coral haze [#F2A4A0](https://codigrate.com/tools/color/F2A4A0), a pastel rather than a neon. They are the most frequent colored words in any file, so they get the softest warm tone in the set. - Methods and fields in sunset coral [#FE8078](https://codigrate.com/tools/color/FE8078), a shade hotter, for the things your code calls and reads. - Strings and numbers in golden sand [#F8D273](https://codigrate.com/tools/color/F8D273), the brightest syntax color in the theme, the low sun on the water. - Tags in flamingo [#FE788C](https://codigrate.com/tools/color/FE788C) and global variables in orchid [#DA78B0](https://codigrate.com/tools/color/DA78B0), the neon along the strip. - Parameters in electric aqua [#00D1C1](https://codigrate.com/tools/color/00D1C1) and attributes in a pool blue [#5DCCE4](https://codigrate.com/tools/color/5DCCE4), the lights under the water. - Local variables in palm green [#82D59F](https://codigrate.com/tools/color/82D59F), the fronds against the dusk. - Static members in an italic art deco blue [#92B5E8](https://codigrate.com/tools/color/92B5E8), a pale facade color, set apart by slant as well as by hue. Class names, function names and constants stay a plain light grey [#E0E0E0](https://codigrate.com/tools/color/E0E0E0). Leaving the names uncolored is what keeps a Miami file readable. The eye takes in the shape of a line first, keyword, name, value, and the neon only lands where it has something to say. ## The Final Product This is Miami put back together. The raspberry black and the neon look at home in a JetBrains IDE and in Sublime Text, Slack and Ghostty take the same night to the chat and the shell, and Rhino gives its viewports the same after dark glow.
Miami theme in a JetBrains IDE
JetBrains
Miami theme in Sublime Text
Sublime Text
Miami theme in Slack
Slack
Miami theme in Ghostty
Ghostty
Miami theme in Rhino
Rhino
## Reading It Back Taken apart, Miami is a set of careful decisions dressed for a night out. The darks share one hue so the pinks have somewhere to sit. The hottest pink is saved for the accent and the caret, while the keywords that fill every line get a pastel. The one bright gold is spent on strings, the tokens you most often scan for. The aquas and greens are the counterweight that keeps a pink theme from turning into one long glow, and the comments step back by temperature instead of fading out. It suits a dim room and a long evening, which is also when the real city looks like this. Miami installs free on JetBrains, VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from its [theme page](https://codigrate.com/theme?product=miami). ## Frequently Asked Questions ### What is the Miami theme? Miami is one of Codigrate's dark city themes, built around Miami at the hour the sunset hands over to the neon. The editor is a deep raspberry near black instead of a neutral charcoal, and the colors on it come from the city after dark: a hot Miami pink for the accent, sunset coral and flamingo for much of the code, a golden sand for strings, and electric aqua, palm green and a pale art deco blue to cool it all down. It reads like an evening on Ocean Drive rather than a plain dark mode, loud in places but never glaring. ### Why is the Miami background red instead of black or grey? Because a flat charcoal would fight the pinks. Miami builds every dark from one hue, around 340 degrees, the raspberry left in the sky once the sun is gone: the input wells at #270D16, the editor at #33121D, the tool windows at #532033 and the outer frame at #5D263A. The pinks and corals on top share that undertone, so the syntax sits in the room instead of floating over it, and the panels separate by a clear step in lightness rather than by drawn lines. ### How are the syntax colors chosen in Miami? They come in two families. The warm one is the neon: a soft coral haze for keywords, sunset coral for methods and fields, flamingo for tags, orchid for globals, and a golden sand, the brightest color in the editor, for strings and numbers. The cool one is the tropics: electric aqua for parameters, a pool blue for attributes, palm green for local variables and an italic art deco blue for static members. Comments drop to a lavender grey, the only cool neutral in the theme, so notes step back from the code. ### Is Miami too bright for long coding sessions? It is loud on purpose, but the loud colors are placed with care. Keywords, the most frequent colored words in any file, get the softest warm tone in the set, a pastel coral rather than the neon pink, and the hot pink is kept for the interface accent and the caret. Editor text is a pearl white #E4E1E2 at about 13:1 against the background, comfortable rather than stark, and the backgrounds stay deep. In a dim room it feels lively without wearing the eyes out. --- # Anatomy of a Light Theme: Sakura > Anatomy of Sakura, a light IDE theme: blossom white and petal pink backgrounds, a deep cherry foreground, and syntax in rose, garden green and sky blue. - URL: https://codigrate.com/blog/anatomy-of-the-sakura-theme - Published: 2026-07-06 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Sakura](https://codigrate.com/theme?product=sakura) - Premium themes with a similar palette: [Fuji](https://codigrate.com/theme?product=fuji) - Publisher: Codigrate (https://codigrate.com) Sakura takes its colors from a cherry blossom garden in full bloom: a tree of soft pink flowers, the green of the leaves and grass below, and a clear spring sky behind. The job of the theme is to keep that garden on screen while you work, light enough for a bright room and soft enough to feel like the season. Here is how Sakura is built, color by color, and why each one sits where it does. It is the blossom colored sibling of the daylight [Autumn teardown](https://codigrate.com/blog/anatomy-of-the-autumn-theme), and the light answer to the dark trio, the icy [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme), the cool [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme) and the dusky [Roraima](https://codigrate.com/blog/anatomy-of-the-roraima-theme). Its petal pink is the same one the [HWB post](https://codigrate.com/blog/hwb) mixed from a rose hue drowned in white. ## A Garden In A Palette The source description sets the brief in one breath. Delicate pinks for the blossoms as the backdrop, muted greens and blues as complementary accents for the tranquil garden and the clear sky. So the structure of the theme is the blossom, soft and high, and the color is the garden it sits in, the green and blue rationed against the pink. You can read the whole palette as that one scene. The light is a family of soft blossom whites, the editor [#FEFCFC](https://codigrate.com/tools/color/FEFCFC) and the panels just below it in petal pink. The garden is the set of colors on top: a deep sakura rose [#B54B66](https://codigrate.com/tools/color/B54B66) for the accent that runs through the interface, and the greens and blues of the garden and sky for the code. ## The Harmony: Blossom, Leaf And Sky Where Autumn ran a long warm sweep and Roraima split warm against cool, Sakura is built on the pink blossom answered by its natural complements, the green leaf and the blue sky. Lay its colors out and the pinks gather near 330 to 350 degrees, the roses and blush of the flowers, while the greens sit near 130 and the blues near 205, the [complementary](https://codigrate.com/blog/harmony-in-opposites) other side of the wheel that a blossom is always seen against. It works because these are colors that already belong together outside. Pink flower, green leaf and blue sky are the ordinary sight of a spring day, so a palette drawn from a blooming tree reads as one calm garden rather than a set of unrelated highlights. The pink does the leading, the green and blue keep it from turning saccharine, and because every hue is softened toward the light, the whole screen stays gentle rather than loud. ## Backgrounds, Built From Blossom A light theme lives or dies on its whites, and Sakura never draws a hard line between panels. It stacks soft blossom tones and lets a small step of lightness do the dividing: - Surface [#F8DBE6](https://codigrate.com/tools/color/F8DBE6), the petal veil, the outermost frame the window sits in. - Window [#FCF4F7](https://codigrate.com/tools/color/FCF4F7), the pale petal of the tool windows, tabs and panels. - Editor [#FEFCFC](https://codigrate.com/tools/color/FEFCFC), the blossom white the code is written on, the brightest of the set. None of these is a flat white. Each is a blossom tone pulled almost all the way up to the light, so the brightness has a blush in it. When you select text the theme reaches for a full bloom pink, [#FFC9DC](https://codigrate.com/tools/color/FFC9DC), and the active line lifts to a soft spring leaf, [#DBEACB](https://codigrate.com/tools/color/DBEACB), so even the highlights come from the garden rather than from a generic blue. ## One Foreground, Several Voices The reading happens on the foreground, and Sakura leans on one main color for it: a deep cherry maroon [#3D0013](https://codigrate.com/tools/color/3D0013), not pure black. Against the soft blossom white editor that lands the contrast comfortably, dark enough to read all day, warm enough that it never cuts the way pure black on pure white can. From that one anchor the theme builds its quiet hierarchy. Secondary text lifts to a mauve shadow [#94667D](https://codigrate.com/tools/color/94667D), and comments go quieter still, so your notes sit behind your code without vanishing. That is the same contrast ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): importance read as darkness, not as another loud color. ## Syntax: The Colors Of The Garden Open a file and the garden fills in. The structure of the language is painted in things you would find under a blooming tree: - The loud tokens in a rose garden [#CB6B91](https://codigrate.com/tools/color/CB6B91) and a deep sakura [#B54B66](https://codigrate.com/tools/color/B54B66), the fullest blossoms on the branch. - Mid tones in a soft blush pink [#EFA5BF](https://codigrate.com/tools/color/EFA5BF) and a quieter plum wine [#98556C](https://codigrate.com/tools/color/98556C), the petals in shade. - The green code in a calm tea leaf [#618C71](https://codigrate.com/tools/color/618C71) and a brighter new stem [#AEC09B](https://codigrate.com/tools/color/AEC09B), the leaves under the flowers. - Keywords in a clear sky blue [#397FB7](https://codigrate.com/tools/color/397FB7) and a river stone [#607FA9](https://codigrate.com/tools/color/607FA9), the day behind the tree. - A soft pollen gold [#BC9C5C](https://codigrate.com/tools/color/BC9C5C) for the warm accent, the dust at the center of a bloom. Line them up and they are the garden itself: rose and blush for the blossom, plum for the petals in shade, green for the leaves, blue for the sky, and a gold for the pollen. Because the pinks lead and the green and blue only answer them, the code reads as one calm garden in bloom rather than a scatter of bright signals. ## The Final Product Here is Sakura assembled. Blossom white and petal pink frame the code in a JetBrains IDE and in Sublime Text, Slack and Ghostty carry the same soft light, and Rhino follows along, so a full day of work happens in one garden instead of five apps.
Sakura theme in a JetBrains IDE
JetBrains
Sakura theme in Sublime Text
Sublime Text
Sakura theme in Slack
Slack
Sakura theme in Ghostty
Ghostty
Sakura theme in Rhino
Rhino
## Reading It Back Put the pieces together and the theme tells one story. Soft blossom whites give brightness without ever going to a hard, flat white. A deep cherry foreground, lifted through mauve, keeps the reading calm. A garden palette, rose and blush leading, green leaf and blue sky answering, carries the syntax in the colors of a blooming tree, with a soft pollen gold for warmth and a deep sakura accent running through the interface. Every color is doing a job, and the jobs all point back to the same spring morning under the flowers. Want to try it in the editor you already work in? Sakura installs on JetBrains, VS Code, Cursor, Chrome, Slack and Ghostty, all from its [theme page](https://codigrate.com/theme?product=sakura). ## Frequently Asked Questions ### What is the Sakura theme? Sakura is one of Codigrate's light nature themes, built around a blooming cherry blossom garden in spring. Soft blossom whites and petal pinks hold the editor like a tree in full bloom, a deep cherry maroon carries the text, and the syntax is painted in the colors of the garden: rose and blush for the blossoms, a calm garden green for the leaves, and a clear sky blue for the day behind them. The whole screen reads like sitting under a flowering tree rather than a plain light mode. ### Why pink backgrounds instead of a plain white? A single hard white can glare and feel clinical. Sakura stacks soft blossom tones instead, a near white editor at #FEFCFC over a pale petal window #FCF4F7 and a deeper petal veil frame #F8DBE6, so the light has a blush in it and the panels separate by a soft step rather than a hard line. The faint pink in the whites is what keeps the theme feeling like a tree in bloom and not like a blank page. ### How are the syntax colors chosen in Sakura? They come straight from the garden. The blossoms carry the warm code: a blush pink, a rose garden and a deep sakura for the loud and mid tones, with a plum wine and mauve for the quieter ones. The leaves answer in green, a calm tea leaf and a brighter new stem, and the sky sits behind it all in a clear blue for keywords, with a soft pollen gold for the odd warm accent. Nothing reaches for a pure screen primary; every hue is something you would find in a blooming Sakura garden. ### Is a light theme like Sakura better for your eyes? Neither light nor dark is automatically easier; what matters is keeping the contrast comfortable and matching the room. A light theme like Sakura helps most in a bright room, where a dark editor can feel like a hole in the page, by keeping the background a soft blush white and the text a deep cherry rather than pure black on pure white. The garden colors also stay off the loudest, most saturated primaries, which keeps the pink from tiring the eyes over a long session. --- # Anatomy of a Dark Theme: Roraima > Anatomy of Roraima, a dark IDE theme: a near black canyon at nightfall, lit by the oranges and golds of a Roraima sunset against cool twilight blues. - URL: https://codigrate.com/blog/anatomy-of-the-roraima-theme - Published: 2026-07-05 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Roraima](https://codigrate.com/theme?product=roraima) - Premium themes with a similar palette: [Etna](https://codigrate.com/theme?product=etna) - Publisher: Codigrate (https://codigrate.com) Roraima takes its colors from a single moment: the sun going down over Mount Roraima, the flat topped tepui standing above the cloud in South America. The sky at that hour is two halves at once, fire low on the horizon and deep twilight climbing above it, and the theme's job is to keep that sunset on screen while you work, dark enough for a dim room and warm enough to feel like the last light on the mountain. Here is how Roraima is built, color by color, and why each one sits where it does. It is the warm, dusky cousin of the icy [Everest teardown](https://codigrate.com/blog/anatomy-of-the-everest-theme), the cool [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme) and the earthy [Sequoia](https://codigrate.com/blog/anatomy-of-the-sequoia-theme), and the dark answer to the daylight [Autumn](https://codigrate.com/blog/anatomy-of-the-autumn-theme). ## A Sunset In A Palette The source description sets the brief in one breath. Deep twilight hues of blues and purples blended with the fiery brilliance of oranges and yellows, the serene majesty of Roraima as day turns to night. So the structure of the theme is the dark canyon, warm and low, and the color is the sky above it, the fire rationed against the twilight. You can read the whole palette as that one view. The rock is a family of warm near blacks, the editor [#1E1A1B](https://codigrate.com/tools/color/1E1A1B) with the panels a step above it in canyon shadow. The sky is the set of colors on top: a coral orange [#CC654E](https://codigrate.com/tools/color/CC654E) for the accent that runs through the interface, warm sunset tones for most of the code, and a cool violet and blue climbing above them for the twilight. ## The Harmony: Warm Sunset, Cool Twilight Where Everest was built on a single complementary pair and Autumn on a long warm sweep, Roraima is built on a warm and cool split, the two sides of a sunset sky. Lay its colors out and the warm half gathers near 10 to 40 degrees, the corals and ambers and golds of the horizon, while the cool half answers across the wheel near 210 to 270, the river blues and the twilight violet. A green sits off to the side for the valley below. It works because this is a split you have actually seen. Warm light low and cool sky high is the ordinary shape of dusk, so a palette drawn from it reads as one evening rather than a clash of hot and cold. The warm side does the heavy lifting, the [complementary](https://codigrate.com/blog/harmony-in-opposites) cool side keeps it from going monotone, and because both are slightly muted by the dark behind them, the whole screen stays calm instead of loud. ## Backgrounds, Cut From The Canyon A dark theme lives or dies on its near blacks, and Roraima never draws a hard line between panels. It stacks warm rock tones and lets a small step of lightness do the dividing: - Input [#171415](https://codigrate.com/tools/color/171415), the cave floor, the darkest wells where you type. - Editor [#1E1A1B](https://codigrate.com/tools/color/1E1A1B), the deep rock the code is written on. - Window [#322628](https://codigrate.com/tools/color/322628), the canyon shadow of the tool windows, tabs and panels. - Surface [#372C2F](https://codigrate.com/tools/color/372C2F), the outermost ledge the whole window sits in. None of these is a neutral charcoal. Each carries a trace of red and brown, the tepui stone pulled almost all the way down to black, so the dark has warmth in it. When you select text the theme reaches for a deep terracotta, [#582F29](https://codigrate.com/tools/color/582F29), and hovering warms to [#5F2F27](https://codigrate.com/tools/color/5F2F27), so even the highlights come from the canyon rather than from a generic grey. ## One Foreground, Several Voices The reading happens on the foreground, and Roraima leans on one main color for it: a soft cloud grey [#CEC1C1](https://codigrate.com/tools/color/CEC1C1), not pure white. Against the warm near black editor that lands the contrast comfortably, bright enough to read all day, soft enough that it never glares the way pure white on pure black can. From that one anchor the theme builds its quiet hierarchy. Secondary text drops to a misty rose [#AD8A8A](https://codigrate.com/tools/color/AD8A8A), and comments go quieter still, so your notes sit behind your code without vanishing. That is the same contrast ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): importance read as brightness, not as another loud color. ## Syntax: Fire And Twilight Open a file and the sunset fills in. The structure of the language is split across the sky, warm on one side and cool on the other: - The loud tokens in a coral sunset [#CC654E](https://codigrate.com/tools/color/CC654E) and a warm coral canyon [#D17458](https://codigrate.com/tools/color/D17458), the fire low on the horizon. - Mid tones in amber sand [#D69568](https://codigrate.com/tools/color/D69568) and a soft pink quartz [#ED8B8B](https://codigrate.com/tools/color/ED8B8B), the glow just above the fire. - The quieter warm code in dry grass gold [#DDBE6D](https://codigrate.com/tools/color/DDBE6D) and savanna gold [#D1BA46](https://codigrate.com/tools/color/D1BA46), the last light on the plain. - Keywords and structure in a twilight violet [#8F78B7](https://codigrate.com/tools/color/8F78B7) and a river blue [#5292C7](https://codigrate.com/tools/color/5292C7), the cool sky climbing above the glow. - Strings held in a valley green [#4CC27B](https://codigrate.com/tools/color/4CC27B), the one clear cool signal, the land under the sky. Line them up and they are the sunset itself: coral and amber for the fire, gold for the fading light, violet and blue for the twilight, and a single green for the valley. Because the warm side carries most of the code and the cool side only answers it, the screen reads as one dusk over the mountain rather than a scatter of bright signals. ## The Final Product Put back together, Roraima looks like this. The canyon black and the sunset colors go from a JetBrains IDE to Sublime Text without losing anything, Slack and Ghostty keep the same nightfall around the chat and the shell, and Rhino sets its viewports in the same dusk.
Roraima theme in a JetBrains IDE
JetBrains
Roraima theme in Sublime Text
Sublime Text
Roraima theme in Slack
Slack
Roraima theme in Ghostty
Ghostty
Roraima theme in Rhino
Rhino
## Reading It Back Put the pieces together and the theme tells one story. Warm near blacks give darkness without ever going to a cold, flat charcoal. A soft cloud grey foreground, dropped through misty rose, keeps the reading calm. A split palette, corals and golds on the warm side and violet and blue on the cool, carries the syntax across a sunset sky, with a valley green for the land and a coral accent for the last light. Every color is doing a job, and the jobs all point back to the same hour over Mount Roraima. Want to try it in the editor you already work in? Roraima installs on JetBrains, VS Code, Cursor, Chrome, Slack and Ghostty, all from its [theme page](https://codigrate.com/theme?product=roraima). ## Frequently Asked Questions ### What is the Roraima theme? Roraima is one of Codigrate's dark nature themes, built around the sunset over Mount Roraima, the great flat topped tepui in South America. The editor is a near black canyon, warm rather than cold, and the color that lands on it is the sky at that moment: fiery oranges and golds low on the horizon fading up into deep twilight blue and violet. It reads like the last hour of daylight over the mountain rather than a plain dark mode, warm at the bottom, cool at the top, calm all the way through. ### What backgrounds does Roraima use? Roraima stacks warm near blacks instead of one flat charcoal. The editor is a deep rock brown at #1E1A1B, the tool windows lift to a canyon shadow #322628, the outer frame to #372C2F, and the input wells drop to the darkest cave floor #171415. Every one carries a trace of red and brown, the color of the tepui stone rather than of neutral grey, so the dark has warmth in it and the panels separate by a soft step of lightness rather than a hard line. ### How are the syntax colors chosen in Roraima? They are split across the sunset sky. The warm half carries most of the code: a coral orange for the loud tokens, amber and sand for the mid tones, and gold for the quieter ones, the fire low on the horizon. The cool half answers it: a river blue and a soft violet for keywords and structure, the twilight climbing above the glow, with a valley green held back for strings so they read clearly against the warm. Nothing reaches for a pure screen primary; every hue is somewhere in that one sunset. ### Is Roraima good for long coding sessions? That is what the warm near black is for. A dark theme is easiest on the eyes in a dim room, and Roraima keeps its background low and warm so the screen is not a cold hole in a dark space, with the text a soft cloud grey rather than harsh pure white. The syntax stays mostly in warm earth and sunset tones and rations its brightest colors, so the code has clear structure without a scatter of loud, saturated signals to tire you out over a long stretch. --- # CMYK: How Four Inks Print Every Color > CMYK reads backwards from every screen model: you start on white paper and subtract light with ink. Why the black K exists, and why neon never quite prints. - URL: https://codigrate.com/blog/cmyk - Published: 2026-07-04 - Category: Color Theory - Theme: [Miami](https://codigrate.com/theme?product=miami) - Publisher: Codigrate (https://codigrate.com) The color code `cmyk(0% 63% 36% 0%)` is an order for a printing press. Lay down no cyan, a strong dose of magenta, a little yellow, no black, all onto white paper. What comes back is the hot magenta [#FF5FA2](https://codigrate.com/tools/color/FF5FA2) that washes down a Miami avenue after dark, the pink glowing off the wet asphalt and the neon along the strip. And a Miami night is the right place to start, because it reads like a print shop's ink drawer switched on: a cyan [#00D1C1](https://codigrate.com/tools/color/00D1C1) in the palm light, a magenta [#FF5FA2](https://codigrate.com/tools/color/FF5FA2) down the middle of the road, a yellow [#F8D273](https://codigrate.com/tools/color/F8D273) from the low retro sun, the same three inks a press mixes every other color from. Every notation so far has described light glowing out of a screen, which is exactly what that skyline is doing. CMYK is the only one that describes ink sitting on paper, and it reads backwards from all of them: you do not add color, you take it away. ## What CMYK Actually Is CMYK stands for cyan, magenta, yellow and key, and those four inks are its whole vocabulary. Each value is a coverage percentage, how much of that ink the press lays on the page. Set all four to zero and nothing prints: you are looking at bare white paper. Turn one up and that ink starts drinking its share of the light bouncing off the sheet. Cyan absorbs red, magenta absorbs green, yellow absorbs blue. Stack them and the paper reflects less and less, sliding toward dark. Key is the black ink that finishes the job the other three cannot. That is the reverse of a screen. A monitor starts black and adds red, green and blue light until it reaches white, so more light makes a brighter color. Paper starts white and adds ink until it reaches black, so more ink makes a darker one. One builds color out of light in a dark room, the other carves it out of a white one. The flamingo pink a screen makes by shining a lot of red and some blue, a press makes by holding back green with magenta and dimming blue a touch with yellow, then letting the red the paper still reflects shine through. ## Starting From White The four sliders below all start at zero, on bare paper. The left swatch holds that white paper and never moves; the right one is the print. Drag any ink up and the print pulls away from the paper toward dark, because every ink you add is light you take away. That is the whole model, and it is why the panel darkens as you work instead of brightening.

Add any ink and the print darkens away from the white paper it started on. Push all four high and the sheet runs out of light to give back.

## Why the Black Ink Exists The three colored inks should, on paper, make black by themselves: pile cyan, magenta and yellow at full strength and each drinks its channel of light until none is left. In the real world they make a muddy brown instead, because no ink is perfectly pure and three wet layers never line up exactly. So a press carries a fourth ink made only for darkness. Key prints a true black the colors cannot reach, it deepens shadows without flooding them with expensive colored ink, and it keeps small black text crisp instead of haloed by three slightly offset layers. It is called key because the other inks are registered, lined up, against it. That last letter is the one that makes a page look printed rather than smeared. ## What the Screen Cannot Print Here is the wall every designer hits. The Miami night at the top of this page is lit from within, every window and neon tube glowing straight at you; ink on paper can only bounce back the light already in the room, and it always bounces back a little less. Run that same scene as a poster on a press and it comes home a quieter place, the neon dimmed to whatever the ink can reflect. So the most electric screen colors, the neons and the acid greens, have no ink recipe that reaches them. [#FF5FA2](https://codigrate.com/tools/color/FF5FA2) on a screen is louder than the same code pressed onto a flyer, and no dial closes the gap, because ink cannot out shout a backlight. This is why a brand color often carries two definitions, a bright one for screens and a slightly calmer CMYK build for print, and why proofing a design on real paper before the run is never wasted time. ## Writing CMYK CMYK is the one model on this page with no home in CSS. There is no cmyk() function, because the web paints with light and CMYK paints with ink, and a browser has no press to send the numbers to. It lives instead in the files that do reach a press: the swatches in a design tool, the color fields of a PDF, the setup screen of a printer. On the web you keep the color as hex or rgb and treat its CMYK build as the print-ready twin on the line beside it. Moving between the two is a paste away. The [HEX to CMYK converter](https://codigrate.com/tools/hex-to-cmyk) reads any hex code as its four ink percentages, the [CMYK to HEX converter](https://codigrate.com/tools/cmyk-to-hex) mixes four inks back into a hex code with the math shown on the page, and the [color tool](https://codigrate.com/tools/color) lists the CMYK build beside every other notation for any color you hand it. Codigrate's [Miami theme](https://codigrate.com/theme?product=miami) wears the whole idea on its sleeve: a cyan, a magenta and a yellow pulled straight from a print drawer and set glowing on a dark editor, the three inks doing on screen what they were named to do on paper. The next time a color has to leave the screen and land on something you can hold, read it in ink first: how much cyan, how much magenta, how much yellow, and how much black to make it real. ## Frequently Asked Questions ### What is CMYK color? CMYK is the color model of print. It describes a color as four ink amounts laid on white paper: cyan, magenta, yellow, and key, which is black. Each value is a coverage percentage, how much of that ink the press puts down. With all four at zero nothing prints and you see bare paper; as the numbers rise the inks absorb more of the light bouncing off the page and the color darkens. It is subtractive, the opposite of the additive red, green and blue a screen glows, which is why the same color needs different numbers for print than for a monitor. ### Why does CMYK have a K (black) channel if it already has cyan, magenta and yellow? In theory the three colored inks at full strength should absorb all the light and leave black. In practice they leave a muddy brown, because real inks are not perfectly pure and three wet layers never register exactly. So presses add a dedicated black ink. It prints a true black the colors cannot reach, it deepens shadows without flooding them with costly colored ink, and it keeps small black text sharp instead of fringed by three slightly misaligned layers. It is called key because the other three inks are lined up, registered, against it. ### What is the difference between CMYK and RGB? They run in opposite directions. RGB is additive: a screen starts black and adds red, green and blue light until it reaches white, so more light means a brighter color. CMYK is subtractive: paper starts white and adds ink that removes light until it reaches black, so more ink means a darker color. RGB also covers a wider range, because glowing light can be more vivid than reflected ink. The neon colors a monitor shows often have no CMYK recipe that matches them, which is why bright screen designs look calmer once they are printed. ### Can I use CMYK in CSS or on the web? No. There is no cmyk() function in CSS, because the web paints with light and CMYK paints with ink, and a browser has no press to send the numbers to. CMYK lives in the files that do reach a press: design tool swatches, PDF color fields, printer setups. On the web you keep the color as hex or rgb and treat its CMYK build as the print-ready twin. To move between them, convert: read a hex code as ink percentages when a color has to be printed, and read ink percentages back to hex when a printed color has to go on screen. --- # HWB: Pick a Hue, Add White, Add Black > HWB reads like a mixing recipe: a hue, some white, some black. How sakura pink falls out of a rose hue drowned in white, and where hwb() works in CSS. - URL: https://codigrate.com/blog/hwb - Published: 2026-07-03 - Category: Color Theory - Theme: [Sakura](https://codigrate.com/theme?product=sakura) - Publisher: Codigrate (https://codigrate.com) The color code `hwb(330 55% 13%)` is a set of mixing instructions. Take the hue that sits at 330 degrees on the color wheel, an electric rose pink. Stir in 55 percent white. Add 13 percent black. What comes out is sakura, the soft petal pink [#DE8CB5](https://codigrate.com/tools/color/DE8CB5), and unlike every other notation in CSS, you could have followed that recipe with actual paint: a cherry blossom is not a gentle pigment, it is a loud one drowned in white. Hex hides its meaning in base sixteen, HSL asks you to reason about saturation, but HWB just tells you what went into the jar: a hue, some white, some black. ## What HWB Actually Is HWB stands for hue, whiteness, blackness, and those are its three dials. The hue is the same angle HSL uses, one lap around the color wheel: 0 at red, 120 at green, 240 at blue, back to red at 360. Whiteness is how much white is folded into that hue, and blackness is how much black. Set both to zero and you get the pure hue at full strength, the loudest version of that color the screen can show. Everything else the hue can become is some mixture of it with white and black. Run the sakura pink backwards and you can watch the recipe. Its pure hue at 330 degrees is [#FF0080](https://codigrate.com/tools/color/FF0080), a shocking rose with nothing mixed in, closer to a neon sign than to a flower. Fold in the 55 percent white and it lifts into a petal. Add the 13 percent black and it settles into [#DE8CB5](https://codigrate.com/tools/color/DE8CB5), the pink a cherry branch actually wears. Only a third of the mix is still the raw hue; the rest is mostly white doing what spring does. Painters have named these moves for centuries, and HWB writes the names as numbers. White alone makes a tint, the pastel direction: hwb(330 40% 0%) is the bubble gum [#FF66B3](https://codigrate.com/tools/color/FF66B3). Black alone makes a shade, the deep direction: hwb(330 0% 40%) is the raspberry [#99004D](https://codigrate.com/tools/color/99004D). White and black together make a tone, the muted middle ground: hwb(330 30% 30%) is the dusty rose [#B34D80](https://codigrate.com/tools/color/B34D80). Every tint, shade and tone of a hue is just a different spot on those two dials. The three sliders below are the whole model. The left swatch holds the pure hue; the right one is the mix. Drag the whiteness or the blackness and the mix pulls away from the pure hue while the pure hue stands still. Drag the hue and both move together, because you swapped the pigment in the jar.

Drag the whiteness or the blackness and the mix pulls away while the pure hue holds. Push the two past one hundred together and the hue vanishes into grey.

## When White and Black Fill the Jar The two percentages share one jar, and that gives HWB its one strange rule. Whiteness and blackness each take their share of the mix, and whatever room is left belongs to the hue. At 55 percent white and 13 percent black, about a third of the mix is still hue. At 50 and 50 there is no room left at all, and the hue, whichever one you picked, colors nothing. The result is plain grey. Push past 100 and CSS scales the two values down to fit, keeping their proportions. So hwb(330 80% 60%) does not get pinker for the 330; the 80 and 60 are squeezed into 57 percent white and 43 percent black, and the color lands on the grey [#929292](https://codigrate.com/tools/color/929292). Every notation has an edge case; this is the only one you can explain with a full jar. ## Reading Colors as Recipes Once you can read the notation, colors start confessing how they were made. A pastel is a color with a big whiteness number and almost no black: the powder blue [#B3D9FF](https://codigrate.com/tools/color/B3D9FF) reads as hwb(210 70% 0%), seventy percent white barely tinted by a blue hue. A deep, rich color is the reverse, blackness doing the work: the bottle green [#0A4D33](https://codigrate.com/tools/color/0A4D33) carries almost seventy percent black. And the dusty, muted colors that interfaces lean on, the slates and sages and clays, all hold some of each, which is exactly what makes them read as calm. That makes HWB a useful reading of a palette even when the palette was built in another notation entirely. A row of hover states that all share one hue with whiteness stepping up is a family; the odd one out shows its wrong number immediately. When a brand color needs a lighter hover or a darker pressed state, the HWB reading names the dial to turn: add white for one, add black for the other, and the hue never drifts. An entire theme can live on one shelf of the recipe book. Codigrate's [Sakura theme](https://codigrate.com/theme?product=sakura) is a light editor theme built the way this post's pink was mixed: blossom hues carried almost all the way to white for the surfaces, with just enough black held back in the syntax colors to keep the code sharp. Soft on the eyes for exactly the reason a petal is. ## Writing hwb() in CSS The notation is part of CSS Color 4 and every current browser reads it. The three values sit inside `hwb()` separated by spaces, no commas: `hwb(330 55% 13%)`. The hue takes no unit, the other two take percent signs, and an alpha channel goes after a slash, `hwb(330 55% 13% / 0.5)`. Support arrived across all the major engines by early 2022, so unless you maintain something genuinely old, you can ship it as is; and if you do need the fallback, the same color as hex on the line above costs nothing. Converting in and out is the easy part. The [HEX to HWB converter](https://codigrate.com/tools/hex-to-hwb) reads any hex code as its recipe, the [HWB to HEX converter](https://codigrate.com/tools/hwb-to-hex) mixes a recipe back into a hex code with the worked math on the page, and the [color tool](https://codigrate.com/tools/color) lists the HWB reading alongside every other notation for any color you give it. The next time a color needs adjusting, try naming the change before touching a picker: more white, more black, or a different hue. That is the entire model, and it is usually the entire fix. ## Frequently Asked Questions ### What is HWB color? HWB describes a color as a mixing recipe: a hue angle on the color wheel, a whiteness percentage saying how much white is folded in, and a blackness percentage saying how much black. With both at zero you get the pure hue at full strength, and every other value of the hue comes from stirring white or black into it. It is part of CSS Color 4, written hwb(330 55% 13%), and it is the notation closest to how painters actually mix color. ### How is HWB different from HSL? They share the same hue wheel, so the first number means the same thing in both. The other two dials differ. HSL steers a color with saturation and lightness, two abstract axes you adjust until it looks right. HWB steers it with the amount of white and the amount of black mixed into the pure hue, which maps straight onto the old painter vocabulary: white only makes a tint, black only makes a shade, both together make a tone. The same color can always be written both ways; they are two recipes for one result. ### What happens when whiteness and blackness add up to 100 or more? The hue runs out of room. Whiteness and blackness each claim a share of the mix, and once the two shares fill it completely there is nothing left for the hue to color. CSS resolves the overflow by scaling the two values down to fit, and the result is the neutral grey given by whiteness divided by the sum of the two. So hwb(330 80% 60%) is the same mid grey you would get at any other hue angle, because the 330 never gets a say. ### Do browsers support hwb() in CSS? Yes. The hwb() function is part of CSS Color 4 and has shipped in every major engine since early 2022, so any current browser reads it. The syntax separates the three values with spaces rather than commas, hwb(330 55% 13%), and an alpha channel goes after a slash, hwb(330 55% 13% / 0.5). If you need to reach further back than 2022 era browsers, serve the same color as hex or rgb() and keep hwb() as the readable source of truth. --- # Dark Mode and Light Mode: What Your Eyes Actually Want > Neither mode is easier on your eyes by default. What dark and light mode do to your pupils, why good dark themes skip pure black, and how to pick by room light. - URL: https://codigrate.com/blog/dark-mode-vs-light-mode - Published: 2026-07-02 - Category: Accessibility - Theme: [Aurora Borealis](https://codigrate.com/theme?product=aurora-borealis) - Publisher: Codigrate (https://codigrate.com) Move a laptop from a dim office to a seat by a sunny window and the dark editor that felt comfortable ten minutes ago turns into a mirror. You start hunting for the brightness key, then for the theme switcher. Nothing about the theme changed; the room did. That is the whole subject in one scene: dark mode and light mode are not rivals where one is simply healthier, they are two tools tuned for different light. Here is what each one actually does to your eyes, and how to pick with some physics behind the choice. ## What a Mode Really Changes Every screen mode is an arrangement of the same pixels, so the real difference is which way the contrast points. Light mode puts dark ink on a bright field, what vision researchers call positive polarity. Dark mode flips it to negative polarity, light ink on a dark field. Your eyes respond to the field, not the ink, because the background is most of the light reaching them. A bright background makes your pupils contract. A smaller pupil behaves like a smaller camera aperture: more of the scene lands in sharp focus and small optical flaws in the eye matter less. This is why reading studies keep finding a modest edge for positive polarity when the task is fine detail, small text stays a little crisper on a light page. A dark background does the opposite. The pupil opens, focus gets a touch softer, and any small focusing error grows. That is also where halation comes from, the glow that makes thin white text seem to bleed into a black background. Roughly one person in three has some astigmatism, and for them that glow is not a subtle effect. None of this makes light mode the winner. It makes it the sharper tool in bright surroundings, which is a narrower claim, and the next two sections show what each mode does with its own strengths. ## What Dark Mode Is Actually For Dark mode earns its place the moment the room gets dim. Screens do not just show content, they emit light, and in a dark room a white page is often the single brightest object you are facing. Your eyes keep adapting between the bright rectangle and the dark surroundings, and that constant readjustment is a big part of what people report as evening eye strain. A dark theme drops the screen's overall luminance closer to the room's, so the adaptation gap shrinks and long sessions get noticeably calmer. There are quieter benefits too. People with light sensitivity, migraine triggers among them, often find dark interfaces usable where bright ones are not. And on OLED displays dark themes draw less power, because a pixel showing true black is simply off and even deep greys cost far less than white. What dark mode is not is a night filter. The polarity of the page says nothing about its color temperature, and a blue leaning dark theme still delivers plenty of the short wavelengths people try to avoid late at night. If evening color is the concern, that is a job for the system's night shift setting, not the theme. ## Why a Good Dark Theme Is Never Pure Black Take a real one apart. Our own [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme) is a dark theme built from a northern night sky, and its editor surface is [#142B37](https://codigrate.com/tools/color/142B37), a deep blue teal, not black. The main text is [#B0B9BE](https://codigrate.com/tools/color/B0B9BE), a soft mineral grey, not white. That pair lands at about 7.4 to 1, comfortably past the 4.5 to 1 accessibility minimum for body text but nowhere near the screen's ceiling. The ceiling is the problem. Pure white on pure black is 21 to 1, the most violent contrast a screen can produce, and at paragraph length it amplifies exactly the weaknesses of negative polarity: wide open pupils plus maximum brightness difference equals maximum halation. Backing the surface off to a deep tinted color and the text down to a light grey keeps every word legible while removing the glare. The tint also carries mood, which is why serious dark themes read as blue nights or warm embers rather than as a void. ## What a Good Light Theme Does With All That Light Light mode has the opposite job: it starts with a huge amount of emitted light and has to keep it from glaring. [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme), our high altitude light theme, sets its editor to [#FDFEFF](https://codigrate.com/tools/color/FDFEFF), white with a barely visible cool cast, and writes with [#0E3448](https://codigrate.com/tools/color/0E3448), a deep blue slate instead of black. That is about 13 to 1, strong enough for effortless reading, restrained enough that the page does not vibrate. Autumn, its warm sibling, does the same trick with cream and espresso. This is the mode that pays off in daylight. In a bright room or near a window the page's luminance sits close to the surroundings, your pupils stay contracted, and text renders at its sharpest. The failure mode is the mirror image of dark mode's: a glowing white page in a dark room is a flashlight pointed at your face, and no amount of font tuning fixes that. ## Match the Screen to the Room So the practical rule is short: follow the light around you. Bright room, light theme. Dim room, dark theme. If your day spans both, let the system switch automatically on schedule and give your eyes the version they would pick anyway. If thin bright text smears for you at night, you are likely one of the astigmatic third, and a light theme at lowered screen brightness can read better than any dark one.

In a dark room your pupils open wide and a bright page becomes the harshest light in sight, so the light pane blooms. With plenty of room light your pupils stay small and focus sharpens, while a dark pane starts reflecting the window like glass.

## Contrast Matters More Than the Mode Whichever side you land on, the contrast band matters more than the polarity. Keep body text at 4.5 to 1 or better, stay well short of 21 to 1, and check the pairs you actually ship in the [color tool](https://codigrate.com/tools/color) rather than trusting how they feel at midnight. We keep a full [catalog of both](https://codigrate.com/themes), dark skies and bright summits alike, because the honest answer to the mode question was never a winner. It is a time of day. ## Frequently Asked Questions ### Is dark mode better for your eyes? Not by itself. Reading studies mostly find a small edge for dark text on a light background, because a bright page makes your pupils contract and a smaller pupil focuses more sharply. Dark mode wins on comfort in a dim room, where a bright page would be the harshest light source in sight. So the honest answer is that the room decides: light mode in bright surroundings, dark mode in dim ones, and comfortable contrast in both. ### Why does white text on black look blurry to some people? The effect is called halation: bright strokes on a dark field seem to glow and bleed into the background. On a dark screen your pupils open wider, and a wider pupil magnifies any small focusing error in the eye. Roughly one person in three has some degree of astigmatism, so for a large share of readers thin light text on a dark page smears slightly no matter how sharp the screen is. Softer text colors and slightly lighter backgrounds reduce it. ### Does dark mode save battery? On OLED screens, yes. An OLED pixel showing true black is simply off and draws almost nothing, and dark grey pixels still draw far less than white ones, so a dark theme can cut display power noticeably. On LCD screens the backlight stays on behind every pixel regardless of color, so a dark theme saves little to nothing there. The display technology, not the theme, decides whether the saving is real. ### Should a dark theme use pure black? Almost never. Pure white text on pure black is the highest contrast a screen can produce, 21 to 1, and at paragraph length that extreme reads as harsh and makes halation worse. Well built dark themes start from a deep tinted surface instead of black and soften the text to a light grey, landing the contrast well past the accessibility minimum but far below the maximum. The result reads as calm instead of glaring. --- # Anatomy of a Light Theme: Autumn > Anatomy of Autumn, a light IDE theme: warm cream backgrounds, a deep espresso foreground, and syntax in the rust, gold and green of fall leaves. - URL: https://codigrate.com/blog/anatomy-of-the-autumn-theme - Published: 2026-07-01 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Autumn](https://codigrate.com/theme?product=autumn) - Publisher: Codigrate (https://codigrate.com) Autumn takes its colors from a bright afternoon late in the year: leaves turning through rust and gold, warm light on everything, and a first cool edge in the air. The job of the theme is to keep that afternoon on screen while you work, light enough for a bright room and warm enough to feel like the season. Here is how Autumn is built, color by color, and why each one sits where it does. It is the warm daylight cousin of the icy [Everest teardown](https://codigrate.com/blog/anatomy-of-the-everest-theme) and the two dark ones, the cool [Aurora Borealis](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme) and the earthy [Sequoia](https://codigrate.com/blog/anatomy-of-the-sequoia-theme). ## A Season In A Palette The source description sets the brief in one breath. Warm hues and the rustic feel of autumn, earth tones blended with crisp air like whites, the essence of fall leaves and late afternoon sunlight. So the structure of the theme is the daylight, warm and high, and the color is everything the light falls on, the turning leaves rationed against the whites. You can read the whole palette as that one scene. The light is a family of warm off whites, the editor [#FCFBFA](https://codigrate.com/tools/color/FCFBFA) and the panels just below it in cream. The leaves are the small set of colors on top: a warm gold [#DEA51D](https://codigrate.com/tools/color/DEA51D) for the accent that runs through the interface, and earth tones for the code, the rust, sienna and green of fall. ## The Harmony: Warm Leaves, Cool Air Where Everest was built on a single complementary pair and Aurora on a cool analogous glow, Autumn is built on the warm earth half of the wheel, closed by a cool note. Lay its colors out and they run from the rust reds and burnt siennas near 10 and 20 degrees, through the ochre and gold around 40, on into the deep and living greens near 120, and finish at a teal near 190. That is a long [analogous](https://codigrate.com/blog/introduction-to-color-harmony) sweep across the warm and green side of the wheel, with one cool step at the end, the same span you see looking from a fallen leaf up to the sky between the branches. It works because these are colors that already belong together in nature. Rust, gold, soil and green leaf are never jarring side by side, so a palette drawn from a turning tree reads as one warm place rather than a set of unrelated highlights. The one cool note, a teal for keywords, sits at the far end of the sweep like the sharp air that arrives with the season. ## Backgrounds, Built From Daylight A light theme lives or dies on its whites, and Autumn never draws a hard line between panels. It stacks three warm off whites and lets a small step of lightness do the dividing: - Surface [#EFE6E0](https://codigrate.com/tools/color/EFE6E0), the outermost linen frame the window sits in. - Window [#F8F4F1](https://codigrate.com/tools/color/F8F4F1), the cream of the tool windows, tabs and panels. - Editor [#FCFBFA](https://codigrate.com/tools/color/FCFBFA), the page your code is written on, the brightest of the three. None of these is a flat white. Each is a warm off white, a whisper of the season pulled almost all the way up to the light, so the brightness has warmth in it. When you select text the theme reaches for a soft peach, [#F4D3BD](https://codigrate.com/tools/color/F4D3BD), and the active line lifts to a pale leaf green, [#E5F4CD](https://codigrate.com/tools/color/E5F4CD), so even the highlights come from the season rather than from a generic blue. ## One Foreground, Several Voices The reading happens on the foreground, and Autumn leans on one main color for it: a deep espresso brown [#2E1B0F](https://codigrate.com/tools/color/2E1B0F), not pure black. Against the warm near white editor that lands the contrast comfortably, dark enough to read all day, soft enough that it never cuts the way pure black on pure white can. From that one anchor the theme builds its quiet hierarchy. Secondary text lifts to a warm taupe [#82614C](https://codigrate.com/tools/color/82614C), and comments go quieter still, so your notes sit behind your code without vanishing. That is the same contrast ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): importance read as darkness, not as another loud color. ## Syntax: The Colors Of Fall Open a file and the season fills in. The structure of the language is painted in things you would find on an autumn walk: - Globals in a rust red [#BE553E](https://codigrate.com/tools/color/BE553E) and parameters in a burnt sienna [#B0633A](https://codigrate.com/tools/color/B0633A), the fire colors of a turning leaf. - Locals and metadata in a deep bark brown [#773918](https://codigrate.com/tools/color/773918), the soil and the branch under the color. - Fields in an ochre gold [#A87F25](https://codigrate.com/tools/color/A87F25), the same warm gold as the accent [#DEA51D](https://codigrate.com/tools/color/DEA51D) that runs through the interface, the late light on everything. - Strings and numbers in a deep forest green [#1B591E](https://codigrate.com/tools/color/1B591E) and living locals in a brighter green [#0E8113](https://codigrate.com/tools/color/0E8113), the leaves that have not turned yet. - Keywords in a cool teal [#006E83](https://codigrate.com/tools/color/006E83), the one sharp, cool note, the air between the trees. Line them up and they are the season itself: rust and sienna for the fire, brown for the branch, gold for the light, green for what is still growing, and a single cool teal for the air. Because the whole set stays on the earth toned, warm side of the wheel until that last step, the code reads as one settled afternoon rather than a scatter of bright signals. ## The Final Product And here is Autumn whole again. The cream pages and the espresso text hold up in a JetBrains IDE and in Sublime Text alike, Slack and Ghostty carry the same warm light, and Rhino turns its panels to the same cream, which makes the whole desk feel like one afternoon in October.
Autumn theme in a JetBrains IDE
JetBrains
Autumn theme in Sublime Text
Sublime Text
Autumn theme in Slack
Slack
Autumn theme in Ghostty
Ghostty
Autumn theme in Rhino
Rhino
## Reading It Back Put the pieces together and the theme tells one story. Warm off whites give brightness without ever going to a hard, flat white. A deep espresso foreground, lifted through taupe, keeps the reading calm. An earthy palette, rust and sienna through gold into green, carries the syntax in the colors of fall, with one cool teal for the crisp air and a warm gold accent for the late light. Every color is doing a job, and the jobs all point back to the same afternoon under turning trees. Want to try it in the editor you already work in? Autumn installs on JetBrains, VS Code, Cursor, Chrome, Slack and Ghostty, all from its [theme page](https://codigrate.com/theme?product=autumn). ## Frequently Asked Questions ### What is the Autumn theme? Autumn is one of Codigrate's light nature themes, built around a bright afternoon late in the year. Warm cream and near white backgrounds hold the editor like sunlight on a clear day, a deep espresso brown carries the text, and the syntax is painted in the colors of fall leaves, rust and burnt sienna, ochre and gold, deep forest green and a cool teal for the crisp air. The whole screen reads like a walk through turning trees rather than a plain light mode. ### Why cream and white backgrounds instead of one flat white? A single hard white can glare and flatten everything on top of it. Autumn stacks warm off whites instead, a near white editor around #FCFBFA over a cream window #F8F4F1 and a deeper linen frame, so the light has warmth in it and the panels separate by a soft step rather than a hard line. The faint warmth in the whites is what keeps the theme feeling like afternoon sun and not like a blank page. ### How are the syntax colors chosen in Autumn? They are the colors of fall itself. Globals take a rust red, parameters a burnt sienna, locals and metadata a deep bark brown, and fields an ochre gold, the browns and reds of turning leaves. Strings and numbers sit in a deep forest green, locals of the living kind in a brighter green, and keywords in a cool teal like the air between the trees. Nothing reaches for a primary screen color, every hue is something you would find on an autumn walk, which is what gives the theme its warm, settled feel. ### Is a light theme better for your eyes? Neither light nor dark is automatically easier; what matters is keeping the contrast in a comfortable range and matching the room. A light theme like Autumn helps most in a bright room, where a dark editor can feel like a hole in the page, by keeping the background warm and high and the text a deep brown rather than pure black on pure white. The earth toned syntax also stays off the loudest, most saturated colors, which keeps long sessions calm. --- # Anatomy of a Dark Theme: Sequoia > Anatomy of Sequoia, a dark IDE theme: a near black forest floor in olive charcoal, a soft grey foreground, and syntax in the earth tones of a redwood forest. - URL: https://codigrate.com/blog/anatomy-of-the-sequoia-theme - Published: 2026-06-30 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Sequoia](https://codigrate.com/theme?product=sequoia) - Publisher: Codigrate (https://codigrate.com) Sequoia takes its colors from the floor of a redwood forest: a deep, shaded ground in olive and charcoal, bark in every shade of brown, the red of the trees themselves, and high above it all the green of a canopy catching the light. The job of the theme is to keep that forest on screen while you work, dark enough to rest in and warm enough to feel alive. Here is how Sequoia is built, color by color, and why each one sits where it does. It is the earthy cousin of the cool [Aurora Borealis teardown](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme) and the light [Everest one](https://codigrate.com/blog/anatomy-of-the-everest-theme). ## A Forest In A Palette The source description sets the brief in one breath. Deep blacks and browns wrap the editor in a calm, focused atmosphere, while accents of vibrant green illuminate the interface, mirroring the vitality of the trees. So the structure of the theme is the forest floor, dark and warm, and the color is everything that grows out of it, rationed against the dark. You can read the whole palette as that one scene. The ground is a family of near black olive charcoals, the editor [#20231C](https://codigrate.com/tools/color/20231C) and the panels just above it. The life is the small set of colors on top: a vibrant moss green [#73A621](https://codigrate.com/tools/color/73A621) for the accent that runs through the interface, and earth tones for the code, the browns, reds and golds of bark and light. ## The Harmony: Earth And Leaf Together Where Everest was built on a single complementary pair and Aurora on a cool analogous glow, Sequoia is built on the warm earth half of the wheel, lifted by green. Lay its colors out and they run from the bark tans and redwood reds near 20 and 30 degrees, through the golden light around 40, and on into the leaf and pine greens near 100 and 160. That is a long [analogous](https://codigrate.com/blog/introduction-to-color-harmony) sweep across the warm and green side of the wheel, the same span you see looking from a tree trunk up to its leaves. It works because these are colors that already belong together in nature. Bark, soil, redwood and new leaf are never jarring side by side, so a palette drawn from them reads as one calm place rather than a set of unrelated highlights. The one cool note, a lichen teal, sits at the far end of the sweep like the blue green that creeps across old wood in shade. ## Backgrounds, Built In Layers A dark theme lives or dies on its neutrals, and Sequoia never draws a hard line between panels. It stacks three near neutrals and lets a small step of lightness do the dividing: - Surface [#394132](https://codigrate.com/tools/color/394132), the outermost frame the window sits in. - Window [#32382C](https://codigrate.com/tools/color/32382C), the tool windows, tabs and panels. - Editor [#20231C](https://codigrate.com/tools/color/20231C), the page your code is written on, the darkest of the three. None of these is a flat grey. Each is an olive charcoal, the green of the forest pulled almost all the way down to black, so the dark has warmth in it. When something becomes active or selected the theme reaches for a true bark brown, around [#533930](https://codigrate.com/tools/color/533930), so even the highlights come from wood rather than from a generic blue. ## One Foreground, Several Voices The reading happens on the foreground, and Sequoia leans on one main color for it: a soft grey [#BABEBA](https://codigrate.com/tools/color/BABEBA), not pure white. Against the near black editor that lands the contrast comfortably, bright enough to read all day, soft enough that it never glares the way white on black can. From that one anchor the theme builds its quiet hierarchy. Secondary text drops to a muted sage grey [#849184](https://codigrate.com/tools/color/849184), and comments go further still into a warm taupe [#6C625A](https://codigrate.com/tools/color/6C625A) set in italic, so your notes sit behind your code without vanishing. That is the same contrast ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): importance read as lightness, not as another loud color. ## Syntax: The Colors Of The Forest Open a file and the forest fills in. The structure of the language is painted in things you would find among the trees: - Keywords in a bark tan [#A67B5B](https://codigrate.com/tools/color/A67B5B), so the shape of the language reads as the wood it is built from. - Strings and numbers in a golden light [#A68F59](https://codigrate.com/tools/color/A68F59), the literal values warm and grouped like sun through leaves. - Local variables in a redwood terracotta [#A86255](https://codigrate.com/tools/color/A86255) and globals in a deeper bark brown [#854F3C](https://codigrate.com/tools/color/854F3C), the reds of the trees themselves. - Fields and methods in a leaf green [#6E9F56](https://codigrate.com/tools/color/6E9F56), static members in a pine teal green [#369772](https://codigrate.com/tools/color/369772), and annotations in a lichen teal [#60A0A8](https://codigrate.com/tools/color/60A0A8). - Comments in that quiet taupe from the foreground ladder, so they read as notes pinned to the bark. Line them up and they are the forest itself: browns and reds for the wood, golds for the light, greens for the growth. Because the whole set stays on the earth toned, low saturation side of the wheel, the code reads as one settled place rather than a scatter of bright signals. ## The Final Product This is Sequoia put back together. The olive charcoal floor sits under the whole window in a JetBrains IDE and in Sublime Text, Slack and Ghostty keep the forest dark around the chat and the shell, and Rhino carries the same earth tones into its viewports.
Sequoia theme in a JetBrains IDE
JetBrains
Sequoia theme in Sublime Text
Sublime Text
Sequoia theme in Slack
Slack
Sequoia theme in Ghostty
Ghostty
Sequoia theme in Rhino
Rhino
## Reading It Back Put the pieces together and the theme tells one story. A near black olive floor gives depth without ever going to a flat black. A soft grey foreground, stepped down through sage and taupe, keeps the reading calm. An earthy palette, bark and redwood through gold into leaf green, carries the syntax in the colors of the forest, with one vibrant green accent for new growth. Every color is doing a job, and the jobs all point back to the same stand of trees. Want to try it in the editor you already work in? Sequoia installs on JetBrains, VS Code, Cursor, Chrome, Slack and Ghostty, all from its [theme page](https://codigrate.com/theme?product=sequoia). ## Frequently Asked Questions ### What is the Sequoia theme? Sequoia is one of Codigrate's dark nature themes, built around the deep, shaded floor of a redwood forest. A near black olive charcoal editor sits under a soft grey foreground, the syntax is painted in earth tones, bark browns, redwood reds and golden light, and a single vibrant green accent runs through the interface like new growth, so the whole screen feels like working under the canopy. ### Why is the background a deep olive charcoal instead of pure black? Pure black against bright text makes the harshest possible contrast, which can buzz and tire the eyes, and it shows every smudge and halo on a screen. Sequoia uses a near black olive charcoal instead, around #20231C for the editor, so the contrast with the soft grey text lands in a comfortable band and the background reads like shaded ground rather than a flat void. The faint green in it is what keeps the theme feeling like a forest and not just a dark mode. ### How are the syntax colors chosen in Sequoia? They are the colors of the forest itself. Keywords take a bark tan, strings and numbers a golden light, local variables a redwood terracotta and globals a deeper bark brown, while methods and fields glow in leaf and pine greens and annotations sit in a lichen teal. Nothing is a primary screen color, every hue is something you would actually find among trees, which is what gives the theme its earthy, settled feel. ### Is a dark theme better for your eyes? Neither dark nor light is automatically easier; what matters is keeping the contrast in a comfortable range and avoiding glare. A dark theme like Sequoia helps most in a dim room, where a bright white page can feel harsh, by keeping the background low and the foreground a soft grey rather than pure white on pure black. The earth toned syntax also stays off the loudest, most saturated colors, which keeps long sessions calm. --- # Gradients: Color That Depends on Position > A gradient makes the color depend on where you are on a surface. How color stops, linear, radial and conic shapes, and repeating gradients actually work. - URL: https://codigrate.com/blog/what-is-a-gradient - Published: 2026-06-29 - Category: Palette & Harmony - Theme: [Spring](https://codigrate.com/theme?product=spring) - Publisher: Codigrate (https://codigrate.com) A solid fill gives every pixel of a shape the same color. A gradient breaks that rule on purpose: the color you get depends on where you are on the surface. Stand at one edge and it is emerald green, drift across and it deepens to purple, and every point between has its own exact color. That is the whole idea, color as a function of position. Everything people label linear or radial or conic is just a different answer to one question, how the surface decides where you are. ## Stops, The Colors And Where They Land You never describe a gradient pixel by pixel. You set a handful of color stops and let the browser fill the gaps. A stop is a color tied to a position, and between any two stops the color slides smoothly from one to the next. Take the emerald green [#1FC274](https://codigrate.com/tools/color/1FC274) and purple [#A65AD6](https://codigrate.com/tools/color/A65AD6) of the hummingbird on the cover: green at the start and purple at the end gives you a clean two color fade. Add a third stop between them and the run bends through that color on the way across. Positions are where it gets expressive. With green at `0%` and purple at `100%` the blend runs evenly across the whole bar, but pin the green stop at `70%` and it holds flat for most of the length before rushing into purple at the end. Put two stops at the very same position and the blend has no room to happen, so the color jumps instead of fading. That hard edge is not a flaw, it is how you build a flag of solid bands, the slices of a pie, or a two tone split down the middle. Pick two colors below and watch the stops turn into a smooth run. ## How The Surface Measures Position Position needs a meaning, and that meaning is what separates the three families. A linear gradient measures position as distance along a straight line you aim with an angle, so the color stays constant across that line and changes only as you travel along it. A radial gradient measures position as distance from a center point, so the color moves in rings spreading outward, and you can shape those rings into a circle or an ellipse sized to reach the nearest edge or the farthest corner. A conic gradient measures position as the angle around a center, so the color sweeps around like a clock hand and lands back where it began. Same stops, three rulers: along a line, out from a point, around a point. ## Stops Do More Than Hold A Color Beyond a color and a position, a stop can be transparent. Set one end to a color and the other to that same color at zero opacity and the gradient fades out instead of shifting hue, which is how a dark scrim sinks into a photo or an edge dissolves into the page. You can hand a single stop two positions so it holds flat across a stretch, and you can drop a bare percentage between two stops to move the midpoint, the spot where the two colors sit evenly mixed, nearer one side than the other. ## Repeating Gradients A repeating gradient describes one short band of stops and tiles it across the shape. Repeating linear gives you stripes or a barber pole, repeating radial gives concentric rings like a target or a ripple, repeating conic gives even pie wedges or a starburst. The stops only need to spell out a single band, and the function copies it as far as the box runs. ## A Gradient Is An Image A gradient is technically an image, which is why it lives in `background-image` and not `background-color`. That has real consequences. You can size it, tile it, and stack several in one element, a faint transparent gradient sitting over a photo with another gradient underneath. That last trick, laying a see through gradient over an image, is the usual way to darken a picture just enough for white text to read on top of it. It is the same instinct behind a color palette. The [Spring theme](https://codigrate.com/theme?product=spring) is built on fresh greens warming into soft floral pinks, so dropping any two of its colors into a gradient gives you the green to pink wash the season is named for. You can build linear, radial and conic gradients, drag the stops and copy the CSS in the [gradient tool](https://codigrate.com/tools/gradient), and read the exact value of any stop color in the [color tool](https://codigrate.com/tools/color). ## Frequently Asked Questions ### What is a color gradient? A color gradient is a fill where the color changes across a surface instead of staying the same. You set a few key colors, called color stops, and the browser blends smoothly between them so every point on the shape gets its own color based on where it sits. The same idea covers a soft two color fade, a sunset that runs through many colors, and a glow that radiates out from a single point. ### What are color stops in a gradient? A color stop is one color pinned to a position along the gradient. Between any two stops the color slides smoothly from one to the next, so two stops make a simple fade and adding more stops lets the gradient pass through several colors on the way across. Positions are usually written as percentages, and moving them changes where each color sits and how much room the blend gets. Placing two stops at the very same position leaves no room to blend, which gives you a hard edge instead of a fade. ### What is the difference between linear, radial and conic gradients? They differ in how the gradient measures position. A linear gradient runs the colors along a straight line set by an angle, so the color changes in one direction across the shape. A radial gradient spreads the colors out in rings from a center point, so the color changes with distance from that point. A conic gradient sweeps the colors around a center by angle, like the hand of a clock, which is why it suits pie charts and color wheels. ### What is a repeating gradient? A repeating gradient defines one short run of color stops and tiles it across the shape instead of stretching it to fit once. Each gradient type has a repeating version: repeating linear makes stripes, repeating radial makes concentric rings like a target, and repeating conic makes evenly spaced wedges. You describe a single band of stops and the pattern copies itself as many times as the surface allows. --- # Value: How Colors Get Vivid > Value is the V in HSV, the brightness dial that tops out at the pure color, not white. How it differs from lightness, and why designers reach for it. - URL: https://codigrate.com/blog/value - Published: 2026-06-28 - Category: Color Theory - Theme: [Etna](https://codigrate.com/theme?product=etna) - Publisher: Codigrate (https://codigrate.com) Yesterday the [lightness](https://codigrate.com/blog/lightness) post set up a great question and saved the answer for today. A pure red sits at the exact middle of the lightness scale, halfway between black and white, even though nothing about it feels halfway to anything. The answer is that there is a second way to measure brightness, one that puts the pure color right where your eye expects it, at the very top. That second way is value, the V in HSV, and once you hold both in your head a lot of color pickers click into place. ## What Value Actually Is Value is a brightness dial, same as lightness. Turn it down to zero and any color goes black. Turn it up and the color gets brighter. The difference is where the dial stops. In HSV the top of the value dial is the pure, fully saturated color. A red [#F94144](https://codigrate.com/tools/color/F94144) at full value is still that vivid red. It does not pale, it does not drift toward white, it just arrives at its most intense self and stays there. That single decision is the whole personality of the model. HSV, sometimes written HSB for hue, saturation and brightness, treats the pure hue as the brightest a color can be. Black is the floor, the pure color is the ceiling, and everything in between is that hue dimmed down some amount. There is no room at the top for white, because white is not, in this model, a brighter red. It is a different thing entirely. ## Where Value Parts Ways With Lightness Here is the one distinction that makes the whole thing click. Lightness and value both start at black, but they aim at different targets. Lightness climbs through the pure color at the halfway mark and keeps going, all the way to white. Value climbs to the pure color and that is the end of the road. Try it below on the same hue. The left swatch reads the dial as value, the right one reads it as lightness, and one slider drives both. Push it to the top. Value lands on the pure color. Lightness sails right past that point and finishes on white. Same hue, same dial, two different destinations.

Slide the dial up to the top. HSV climbs to the pure color, HSL keeps going to white.

## Why A Dial That Stops At The Color Is Useful So why would anyone want a brightness dial that cannot reach white? Because most of the time, when you are picking a color, you are not headed for white. You are headed for a darker or lighter shade of the color you already chose, and you want it to stay that color the whole way. Value gives you exactly that. Drag it down and red gets darker while staying red. Lightness takes a different path, drifting red toward pink as it brightens, which is just right when a soft tint is what you are after. When you want the color to hold its ground instead, value is the dial to reach for. ## Why The Color Picker Square Works The Way It Does Open almost any color picker and you will find a tall hue strip beside a big square. That square is HSV laid out flat. Across the square saturation runs from grey on the left to full color on the right. Up and down the square value runs from black at the bottom to bright at the top. The top right corner, where saturation and value both max out, is the pure hue. Every other point in the square is that hue with some grey mixed in and some darkness mixed in. This is why grabbing a swatch feels so natural. You set the hue once on the strip, then you wander the square hunting for the exact shade, and the pure color is always sitting right there in the corner as your anchor. You are steering two dials at once, saturation across and value up, and because value climbs to the color rather than to white, the bright edge of the square stays full of rich, usable shades. That is the reason pickers are built on HSV: every corner of the square earns its place, right up to the pure hue waiting in the top corner. ## When To Reach For Each Keep both models on the shelf and grab the one that fits the job. Use HSV when you are tuning a single color by feel, picking a row of shades that all need to stay vivid, or reading a color picker square, since its value dial keeps the color intact as you dim it. Use HSL when you are reasoning about contrast, hierarchy and whether text can be read, because its black to white axis is the one that matches how the eye sorts light from dark. They are not rivals. They are two lenses on the same color, and a pure red is the clearest reminder of that. Fifty percent lightness, one hundred percent value, one color wearing two numbers. Once that stops surprising you, you have got the whole picture. You can read the value, lightness and saturation of any color in the [color tool](https://codigrate.com/tools/color), and lay a full set of shades side by side in the [palette tool](https://codigrate.com/tools/palette) to see how they hold their hue as they climb and fall. ## Frequently Asked Questions ### What is value in the HSV color model? Value is the V in HSV, the dial that says how bright a color is. Turn it all the way down and you get black, turn it all the way up and you get the brightest version of that hue. The catch is what brightest means here. In HSV the top of the value dial is the pure, fully saturated color, not white, so a value of one hundred percent on a saturated red gives you a vivid red rather than the pale pink or the plain white you might expect. ### What is the difference between value and lightness? They both measure brightness but they put the ceiling in different places. Lightness, the L in HSL, runs from black at the bottom through the pure color in the middle and on to white at the top, so its brightest point is white. Value, the V in HSV, runs from black at the bottom straight up to the pure color at the top, and it never reaches white at all. A fully saturated red sits at fifty percent lightness in HSL but at one hundred percent value in HSV, the same color landing in two different spots depending on which model you ask. ### What does HSV stand for and is it the same as HSB? HSV stands for hue, saturation and value. HSB stands for hue, saturation and brightness, and it is the exact same model under a different name, so value and brightness mean the same thing here. Photoshop and many design tools label the dial brightness while code and color pickers tend to label it value, but the math is identical. Both describe a cylinder where the pure colors live around the top edge and black sits at the bottom point. ### When should you use HSV instead of HSL? Reach for HSV when you are tuning a single color by eye, especially picking shades that stay vivid. Because the value dial climbs straight to the pure color, pulling it down gives you a clean run of darker shades without the color washing toward white, which is how most color pickers let you drag a square and grab a swatch. Reach for HSL when you are reasoning about contrast and readability, since its symmetric black to white axis lines up with how the eye reads light and dark. --- # Lightness: Deciding What You Can Read > Lightness is how light or dark a color is, the L in HSL: why opposite colors can share one, why contrast lives there, and how to design in grey first. - URL: https://codigrate.com/blog/lightness - Published: 2026-06-27 - Category: Color Theory - Publisher: Codigrate (https://codigrate.com) Drop a photo to greyscale and the color falls away, yet the picture stays perfectly readable, every edge and face and shape right where it was. What survives that is lightness, the quietest of color's three dials and the one that decides whether a layout can be read at all. Hue tells you which color you are looking at, saturation tells you how loud it is, and lightness tells you how light or dark, the plain distance from black to white. It is the dial people notice last and the one that breaks a design first. ## What Lightness Actually Is Lightness is the light to dark axis, the L in HSL, and every color carries one whether you think about it or not. Take any color, drain its hue and its saturation, and the grey you are left holding is its lightness, the color stripped down to nothing but brightness. A lemon yellow has a high lightness because it sits close to white, a navy has a low one because it sits close to black, and the hue you started with had no say in either. The surprising part is how many colors share a lightness. A bright turquoise [#40E0D0](https://codigrate.com/tools/color/40E0D0) and a warm orange [#E0A040](https://codigrate.com/tools/color/E0A040) look nothing alike, opposite sides of the wheel, yet pull the color out of both and they collapse onto the very same grey [#909090](https://codigrate.com/tools/color/909090). Same lightness, different hue. Hold that thought, because it is the whole reason lightness matters more than it looks. The two sliders below lay the idea out. Set a hue and a lightness, and you get a color with, beside it, the grey of that exact lightness. Now drag the hue slider: the color races around the wheel, but the grey next to it never moves, because the grey comes from the lightness alone, not the hue. Drag the lightness slider and both shift together.

Drag the hue and the color changes, but the grey beside it holds, because the grey comes from the lightness, not the hue.

## Lightness Is Where Contrast Lives Here is why that matters. The contrast your eye reads, the thing that makes text crisp or muddy, is almost entirely lightness contrast. Hue and saturation barely register next to it. Put that turquoise and that orange side by side and they vibrate, but set one as text on the other as a background and the words nearly vanish, because the two share a lightness and the eye has no light to dark edge to grab. Opposite hues, no contrast. This is the part of color theory that quietly runs accessibility. A contrast ratio is, underneath the math, a measure of how far two colors sit apart in lightness. Text passes not because its hue clashes with the background but because it is enough lighter or darker. You can swap a heading from blue to green to red and the readability will not budge, as long as the lightness stays put. ## Design In Grey First The fastest way to catch a lightness problem is to throw the color away. Drop the screen to greyscale and the design shows you its bones. If the buttons disappear, the text smears into its panel, the hierarchy goes flat, then the trouble was never the palette, it was the lightness structure underneath it. Painters have worked this way for centuries, blocking in lights and darks before a single real color goes down, because a picture that reads in grey reads in anything. Build a screen the same way. Decide the lightness of the background, the surface that sits on it, the body text, and the one accent that has to pop, and make sure each is a clear step from the next. Get those steps right in grey and the colors you lay on top almost cannot fail. ## Lightness Builds Depth Light and dark do more than separate text from its background. They build space. A surface a few steps lighter than the page floats above it, a shadow a few steps darker presses it down, and a row of cards reads as near or far purely by how their lightness stacks. This is why a dark theme and a light theme are first a lightness decision and only then a color one, and why elevation in a design system is really just a short ladder of lightness, each rung a little lighter than the last. ## Putting It To Work Set the lightness structure before you touch hue. Lay out the lights and darks so the page already works in grey, give your text a real lightness gap from whatever sits behind it, and keep your accent a clear step away from its surroundings so it lands. Only then spend hue and saturation, which are free to wander once the lightness is holding the design together. You can check the lightness of any color in the [color tool](https://codigrate.com/tools/color), which reads it and the contrast it makes against another, and lay a full set side by side in the [palette tool](https://codigrate.com/tools/palette) to see the lights and darks before you commit. Check it in grey. If it works there, it works. ## Frequently Asked Questions ### What is lightness in color? Lightness is how light or dark a color is, the plain distance from black to white. It is the L in HSL, the third dial alongside hue and saturation, and every color carries one. Drain a color of its hue and its saturation and the grey you are left holding is its lightness, the color reduced to nothing but brightness. A lemon yellow has a high lightness because it sits near white, a navy has a low one because it sits near black, and the hue itself has no say in either. ### What is the difference between lightness and saturation? They are separate axes. Lightness is light or dark, how close a color is to white or black. Saturation is how far the color sits from grey, how pure or muted it is. You can take one color and lighten it without muting it, or mute it without darkening it, because the two dials move independently. Most palettes that feel off are a lightness problem being mistaken for a saturation one, or the reverse. ### Why does lightness matter for contrast and readability? Because the contrast your eye actually reads is lightness contrast. Two colors with opposite hues but the same lightness have almost no contrast and blur together when you squint, which is why text needs a clear lightness gap from its background, not just a different color. A contrast ratio is, underneath the math, a measure of how far two colors sit apart in lightness, so a heading stays readable through any hue as long as its lightness holds. ### Is lightness the same as the value in HSV? They are close cousins but not the same. Lightness is the L in HSL, a symmetric axis with black at the bottom, white at the top, and the pure hue sitting halfway. Value is the V in HSV, and it tops out at the pure, fully bright color rather than white, so the two models place a colour's brightness differently. A pure red is the clearest example: it sits at fifty percent lightness in HSL but at full value in HSV, the same color landing in two different spots depending on which model you ask. --- # Saturation: Deciding What Stands Out > Saturation decides what stands out: what it is, why color fades to grey not white, why full blast looks cheap, and how one vivid accent carries a muted palette. - URL: https://codigrate.com/blog/saturation - Published: 2026-06-26 - Category: Color Theory - Publisher: Codigrate (https://codigrate.com) Turn the same teal all the way up and it screams. Turn it down and it whispers, and it stays teal the whole way. That dial has a name. Hue tells you which color you are looking at, but saturation tells you how loud it is, and getting the volume wrong is what makes a palette feel cheap or muddy long before anyone can say why. Here is what the dial actually does and how to set it with intent. ## What Saturation Actually Is Saturation is distance from grey. A fully saturated color is the pure hue with nothing dulling it, every bit of the pigment doing its job. Start pulling the saturation down and grey seeps in, the color softening toward a flat grey of the same brightness, until at the bottom of the dial there is no hue left at all, just grey. The hue itself never moves through any of this. A glowing tropical teal and a soft, dusty teal can be the exact same hue, one with the dial high and one with it low, and that single difference is enough to set them worlds apart in mood. There is a tidy sum under this. With the brightness fixed, a color at S percent saturation sits S percent of the way from its matching grey to the pure hue, so fifty percent is a true halfway mix. That teal at full strength is [#1FFFE9](https://codigrate.com/tools/color/1FFFE9) and the grey that shares its brightness is [#8F8F8F](https://codigrate.com/tools/color/8F8F8F); average the two, channel by channel, and you land on [#57C7BC](https://codigrate.com/tools/color/57C7BC), the same teal at half saturation, the dusty version from a moment ago. That is the whole idea, and it is easier felt than read. The wheel below lays it out: every hue runs around the ring, and each one steps from its purest self on the outer edge inward toward grey, one notch of saturation at a time. Click through the steps of any color and watch the hue hold steady while the life drains out of it.

The outer ring of each hue is its purest, most saturated self. Each step inward keeps the same hue and lightness while draining the saturation toward grey, so the only thing that changes as you move in is the volume.

## Saturation Is Not Brightness Notice where the color does not go. As it weakens you might expect it to wash toward white, but it never does, because light and dark sit on a different dial entirely. Saturation only governs the distance to grey, so a fading color keeps its brightness and drifts to the grey that matches it, not to white. Painters have a word for each move: white added is a tint, black added is a shade, grey added is a tone. The wheel deals only in tones, one hue cut with more and more grey. Keep those two dials straight and a palette that felt muddy for no clear reason often turns out to be a brightness problem wearing a saturation costume. ## The Vivid Trap The quickest way to make a design look cheap is to leave every color at full blast. When everything is fully saturated, everything competes, and the eye finds nowhere to rest. The reds fight the greens, the greens fight the blues, and the whole surface reads as noise instead of order. It is the shared sin of the toddler toy aisle and the slide nobody wanted to present. Vivid is not the problem. Wall to wall vivid is. Nature almost never goes there either. The brightest sunset you have ever seen is still grey at the edges, the most saturated flower sits against muted leaves and soil. Full saturation reads as artificial precisely because the real world keeps it rare, saving the loudest colors for the one berry or the one bird that needs to be found. A screen that turns everything up loses the only thing saturation is good for, which is pointing. ## Muted Carries Its Own Weight Pulling the saturation down does not kill a color. It matures it. The palettes that read as expensive, the editorial layouts, the considered brand systems, the themes that feel calm to live inside, are mostly built on muted ground with vivid saved for a moment or two. A dusty teal, a soft clay, a greyed plum: these are not failed bright colors, they are colors with the confidence to sit back. Muted is what lets a layout breathe, and breathing room is what makes the one loud thing land. Two palettes can run on the very same hues and feel like opposite rooms, because one nudged every color a little more saturated and the other a little more muted. Our Miami theme leans into high saturation for a neon, late night energy, while Tallinn and Sequoia pull the dial back for something quieter and more grown. Same wheel, different volume, completely different feeling. ## One Loud Voice In A Quiet Room Saturation sets hierarchy almost for free. A saturated color steps forward and a muted one steps back, so on a mostly quiet surface a single vivid element becomes the place the eye lands, exactly because it is the only loud thing in the room. Mute the whole layout and then let the button, the price, the one number that matters keep its full saturation, and you have built focus without spending a drop of contrast or a pixel of size. This is why the saturation question is rarely red or blue. It is which red, the one that glows or the one that has settled, and your answer quietly tunes everything sitting beside it. When a palette feels restless for a reason you cannot name, the usual culprit is too many colors shouting at the same volume. Decide which one gets to be loud, pull the rest back, and the whole thing settles. ## Putting It To Work Give one saturation level the lead. Keep most of a screen there, usually on the calmer, muted side, and hold full saturation in reserve for the few things that have to be seen. A muted base makes a single vivid accent unmissable, and a vivid base makes a single muted element feel like a held breath. Either way, the contrast in saturation is doing the work, and you spend it on purpose instead of by accident. You can read the saturation balance of any palette in the [color tool](https://codigrate.com/tools/color) and the [palette tool](https://codigrate.com/tools/palette), which show you how vivid or muted a set of colors really is. Drop in your own colors, or start from one and let the tools fill out the rest, and check the volume before you commit to anything. ## Frequently Asked Questions ### What is color saturation? Saturation is how far a color sits from grey. A fully saturated color is pure pigment with no grey mixed in, the loudest version of that hue. Drain the saturation and the color fades toward a grey of the same brightness, until at zero it is grey with no hue left at all. Crucially the hue never changes as you do this, only its intensity, which is why a fire engine and a faded brick can be the very same red turned up and turned down. ### Why do highly saturated colors look cheap or tiring? Because nothing on screen gets to rest. When every element runs at full saturation they all shout at once, the eye finds no quiet place to land, and the design reads as loud rather than confident. It is the look of a child's toy and a bad slide deck. Even nature rarely goes full blast, since the most vivid sunset is still softened by grey, so a screen that does feels artificial. ### What is the difference between saturation and brightness? Saturation is how pure a color is, how far from grey. Brightness, or lightness, is how light or dark it is, how close to white or black. They move on separate axes, so you can take one red and make it paler without muting it, or muddier without darkening it. Mixing the two up is the usual reason a palette feels off, because the fix was a saturation problem being solved with a brightness change. ### How do you use saturation in a color palette? Pick one saturation level for most of the surface and keep it there, usually a calmer, muted base, then spend full saturation on the one or two things that have to be seen. A muted field gives a single vivid accent somewhere to stand out, so the eye lands on the button or the price without any help from size or contrast. Lead with restraint and let saturation mark what matters. --- # Warm and Cool Colors > Color temperature explained: which half of the wheel runs warm, which runs cool, what each side signals, and how to lead a design with the split. - URL: https://codigrate.com/blog/warm-and-cool-colors - Published: 2026-06-25 - Category: Color Theory - Publisher: Codigrate (https://codigrate.com) Hold a photo of a campfire next to a photo of the sea and nobody has to tell you which one is warm. Color carries the same split, and some quiet part of you sorts every hue into warm or cool before you can explain why. It is one of the oldest tools in color, and it pulls real weight, because it files each hue into one of two moods before you decide anything else. Here is where the two halves come from and how to put them to work. ## The Two Halves Of The Wheel Lay every hue out in a circle and a line falls across the middle on its own. Reds, oranges and yellows gather on one side. Greens, blues and violets gather on the other. We call the first group warm and the second cool, and the striking part is that almost everyone sorts them the same way with no instruction at all, because the groups line up with things our species has always known in the dark. The warm side is fire, sun, embers, a blush. The cool side is water, ice, a shadow at noon, the far blue of a mountain. The wheel only arranges those memories into a ring, warm colors gathered along one arc and cool ones across from them. The line between them is not a wall. The handover happens somewhere around yellow green on one edge and near magenta on the other, and the exact spot is a matter of taste. A color parked on the border, a teal, a chartreuse, is a chameleon: drop it among cool colors and it warms up, set it among warm ones and it cools down. That is the first clue that temperature is half about the color itself and half about the company it keeps. ## What Each Temperature Signals Warm and cool do more than sit on opposite arcs. They carry meaning that stays surprisingly steady from one person to the next, and you can lean on it. Warm reads as energy, appetite, urgency and closeness. It is the color of sale tags, stop signs, fast food and the button that wants to be pressed, because warm grabs you and leans in. Cool reads as calm, trust, focus and distance. It is the color of banks, hospitals, productivity apps and anything that wants to feel safe and unhurried, because cool reassures and steps back. So the temperature you lead with is half the message before a single word is read. A fintech dashboard leans cool to feel serious and secure. A food app leans warm to feel fast and appetizing. Pick the temperature that matches the feeling you are selling, then let the hue settle on the exact shade. ## What Each Side Does To The Eye The split earns its keep because the two halves behave differently, and they do it to everyone, automatically. Warm colors step toward you. A patch of orange [#E0683C](https://codigrate.com/tools/color/E0683C) sits closer to your face than a patch of cool blue [#3C8CE0](https://codigrate.com/tools/color/3C8CE0) the same size on the same wall, so warm reads as near, present, awake. It is the color of the one thing in a room you are meant to notice first. Cool colors do the reverse. They step back, settle, lower their voice. A cool blue or green reads as far away and unbothered, which is why a calm interface is built mostly from them and why a landscape painter reaches for cool blues to shove a mountain range into the distance. Set a warm shape on a cool field and the warm shape floats in front of the cool one, in a depth your eye builds for free, with no help from shadow or size. Painters have leaned on that for centuries. Screens borrow it every day. ## Temperature Lives Inside A Hue, Too Warm and cool are not only a border between hues. They run inside a single hue too, and this is the part that separates a palette someone fussed over from a palette someone grabbed. There are warm reds that lean toward orange and cool reds that lean toward magenta. There are warm greens stuffed with yellow and cool greens dragged toward blue. Even white has a temperature: a warm white holds a whisper of yellow, a cool white a whisper of blue, and that whisper is the whole reason two paint chips that both say white on the tin can look like different days of the week on the wall. So the real question is hardly ever red or blue. It is which red, the one that glows like coals or the one that bites like a bruise, and your answer quietly tunes the mood of everything sitting beside it. Two palettes can run on the same six hues and feel like opposite seasons, because one nudged every color a hair warmer and the other a hair cooler. ## Putting It To Work The cleanest way to use temperature is to give one side the lead and let the other play support. Pick a dominant temperature for a screen and keep most of the surface there. A mostly cool layout stays calm and lets the content breathe, and then a single warm accent, on the button, the price, the one number that has to be seen, becomes the spot the eye lands, exactly because it is the only warm thing in a cool room. Flip the whole thing and a warm, lamplit layout can spend one cool element as its moment of quiet. You also get depth and hierarchy thrown in. Warm forward, cool back, so you can peel a foreground off a background, or an active state off a resting one, with temperature alone, before you spend a drop of contrast or a pixel of size. And when a palette feels restless for a reason you cannot name, the usual culprit is warm and cool wrestling for the lead with neither one winning. Decide who runs the room and the whole thing settles. You can read the warm and cool balance of any palette in the [color tool](https://codigrate.com/tools/color) and the [palette tool](https://codigrate.com/tools/palette), which split a set of colors into its warm and cool shares and tell you at a glance which side is leading. Drop in your own colors, or start from one and let the tools fill out the rest, and check the temperature before you commit to anything. ## Frequently Asked Questions ### What are warm and cool colors? Warm colors are the reds, oranges and yellows, the half of the wheel that reads as fire, sun and skin. Cool colors are the greens, blues and violets, the half that reads as water, ice and shade. The split is one of the oldest tools in color theory because it files every hue into one of two moods before you decide anything else about a palette. ### What do warm and cool colors signal? Warm colors read as energy, appetite, urgency and closeness, which is why sale tags, stop signs and calls to action lean red and orange. Cool colors read as calm, trust, focus and distance, which is why banks, tech and medical brands lean blue, and growth and money lean green. The temperature you lead with carries half the message before a word is read. ### Where is the line between warm and cool on the color wheel? Roughly across the middle. Reds, oranges and yellows sit on the warm side, greens, blues and violets on the cool side, with the handover landing somewhere around yellow green on one edge and near magenta on the other. The exact crossing is a matter of taste, and a color parked on the border can be pushed either way by the company it keeps. ### How do you use warm and cool colors in design? Give one temperature the lead and let the other support it. A mostly cool screen stays calm and recedes, so a single warm accent on the button or the price becomes the spot the eye lands. Warm tones feel near and active, cool tones feel far and quiet, so you can build depth and hierarchy with temperature alone, before you spend any contrast or size. --- # Designing for Color Vision Deficiency > Color blindness, explained for design: the kinds, why red and green get confused, and how to build interfaces everyone can read. Simulate any color live. - URL: https://codigrate.com/blog/designing-for-color-blindness - Published: 2026-06-24 - Category: Accessibility - Publisher: Codigrate (https://codigrate.com) Roughly one person in twelve does not see color the way you do. If your interface tells people what is wrong in red and what is fine in green, a large share of your users are reading a screen where those two cues look almost the same. Color blindness is not rare and it is not a small edge case, it is a normal part of any audience. Here is what it actually is, what each kind does to a color, and how to design so everyone can read your work. ## What Color Blindness Actually Is Normal color vision runs on three kinds of cone cell in the eye, each most sensitive to one band of light: long wavelengths (the reds), medium (the greens), and short (the blues). Every color you see is your brain comparing the signals from those three cones. Take one cone away, or shift where it is most sensitive, and some colors that used to look different start to land on the same signal. That gives four families, one named for each affected cone plus the case where color drops out altogether. Every family comes in two strengths: an anomaly, where the cone is present but shifted, so the loss is partial, and the stronger form where the cone does not work at all. The sections below walk through each one, and the simulator after them lets you push any color through all of them at once. ## Protan: The Red Cone Protan deficiency sits on the long wavelength cone, the one tuned to red. In its milder form, protanomaly, that cone is shifted toward green rather than missing, so reds look duller and noticeably darker than they should. A bright warning red can read as a muddy brown, and a red sitting on a dark background can sink so far it nearly disappears. In the stronger form, protanopia, the red cone does not function at all: red and green collapse into the same range, and reds lose so much brightness that crimson can pass for black. Protan affects a little under one in a hundred men. Its signature is not just confused hues but lost luminance, so a design that leans on red to mean stop or danger is leaning on a color that, for these readers, is both the wrong hue and too dim to stand out. ## Deutan: The Green Cone Deutan deficiency sits on the medium wavelength cone, the one tuned to green, and it is the most common form of color blindness by a wide margin. The milder form, deuteranomaly, shifts the green cone toward red and affects roughly one in twenty men, often so gently that the person never gets it diagnosed. The stronger form, deuteranopia, removes the green cone entirely. Either way the result is red-green confusion, but unlike protan it keeps brightness mostly intact, so reds and greens do not darken, they simply slide toward the same olive or khaki tone. This is the family most worth designing for, both because it is the largest and because its confusion is the quiet kind: a red and a green that look like clear opposites to you can read as two shades of the same muddy color to a deutan reader. ## Tritan: The Blue Cone Tritan deficiency sits on the short wavelength cone, the one tuned to blue, and it is far rarer than the red-green families, affecting well under one percent of people. Unlike protan and deutan it is not sex-linked, so it shows up about equally in everyone. The milder form, tritanomaly, and the stronger tritanopia both pull blue and yellow toward each other: blues can drift toward green, and yellows can fade toward pink or grey. Because so much interface design uses blue for links, focus rings, and primary actions, a blue that no longer separates cleanly from the green or grey around it is a real problem for this group, even though they are a small slice of the audience. ## Monochromacy: No Color At All The last family is not about a single cone but about color washing out almost entirely. In its partial form, achromatomaly, hues are heavily muted; in full achromatopsia, vision runs on brightness alone, the way a black and white photograph does. It is the rarest case, and it often comes with extra light sensitivity. For these readers no hue carries meaning at all, which makes them the clearest test of a simple rule: if your design still works in pure greyscale, where only light and dark remain, it works for everyone. If two things are only told apart by their color, they vanish here completely. ## See It For Yourself The quickest way to understand all four families is to watch a single color pass through each kind of vision at once. Pick a color below and the panel shows it beside how it is perceived under every deficiency, grouped by cone family, the real color on the left of each pair and the simulated one on the right. Try a red next to a green. For most deficiencies they slide toward the same muddy tone, which is exactly why a red and green that read as opposites to you can read as the same thing to someone else. ## Why It Matters For A Screen The trap is carrying meaning with color and nothing else. A status dot that is red for down and green for up, a chart whose only key is its line colors, a form field that turns red when it is wrong, a link that is only a different color from the text around it: each of these vanishes the moment red and green collapse into one. The information was real, it was just locked behind a cue that not everyone can read. None of it means avoiding color. Color is one of the fastest signals you have, and it should stay. It just should never be the *only* signal. ## Designing So Everyone Can Read It A few habits cover almost all of it: - Pair every color cue with a second one. A red error also gets an icon and a message, a green success also gets a checkmark, a chart line also gets a label or a different shape. Remove the color in your head and the meaning should survive. - Keep contrast strong. Color blindness lowers how much hue you can lean on, so brightness contrast does more of the work. This is the same contrast you check for readability in general, covered in [the readability post](https://codigrate.com/blog/introduction-to-readability). - Watch the classic confusing pairs, red against green above all, but also blue against purple and green against brown. If two colors must be told apart, give them clearly different brightness too. - Test with a simulator before you ship, not after. Run your key screens through each deficiency the way the panel above does, and fix anything that stops making sense. ## Reading It Back Color blindness is common, it mostly shows up as red-green confusion, and almost all of it is handled by one rule: never let color be the only thing carrying the message. Pair it with text, shape or contrast, and the same screen works for everyone. To take any color apart yourself, drop it into the [Codigrate color tool](https://codigrate.com/tools/color/00BAFF), which simulates all eight deficiencies and scores the contrast, the same checks worth running on every color you ship. ## Frequently Asked Questions ### What is color blindness? Color blindness, or color vision deficiency, is when one of the eye's three types of cone cell is missing or shifted, so some colors look the same that look different to most people. It is almost never total. Most people with it see plenty of color, they just confuse certain pairs, most often reds with greens. ### How common is color blindness? Common enough that you are designing for it whether you plan to or not. Around one in twelve men and one in two hundred women have some form of color vision deficiency. On a page with a few thousand visitors, hundreds of them are not seeing your reds and greens the way you do. ### What are the types of color blindness? There are four families, three named for the affected cone plus the case where color drops out. Protan involves the red (long-wavelength) cone and makes reds look dark and dull; deutan involves the green (medium) cone and is the most common; both cause red-green confusion. Tritan involves the blue (short) cone and confuses blue with yellow, and it is rare. Monochromacy, the rarest, removes color almost entirely, leaving brightness alone. Each family comes in a milder shifted form and a stronger missing-cone form. ### How do I make a design color-blind friendly? Never carry meaning with color alone. Pair every color cue with a second signal, a label, an icon, a shape or a pattern, so a red error and a green success are still told apart with the color removed. Keep strong contrast, avoid red-on-green and similar confusing pairs, and check your screens through a simulator before you ship. --- # Anatomy of a Light Theme: Everest > Anatomy of Everest, a light IDE theme: layered blue-grey backgrounds, a calm navy foreground, and a cool syntax palette lit by a few warm sparks of dawn. - URL: https://codigrate.com/blog/anatomy-of-the-everest-theme - Published: 2026-06-23 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Everest](https://codigrate.com/theme?product=everest) - Premium themes with a similar palette: [Sydney](https://codigrate.com/theme?product=sydney) - Publisher: Codigrate (https://codigrate.com) Everest takes its colors from a snow peak at first light: cold blue white nearly everywhere, with a single thin band of warm gold where the sun first reaches the summit while the rest of the mountain stays frozen and blue. The job of the theme is to carry that feeling into an editor without ever getting in the way of the code. Here is how Everest is actually built, color by color, and why each one sits where it does. If you read [the Aurora Borealis teardown](https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme), this is its light twin. ## The Mountain In A Palette Everest is the highest place on Earth, and most of what comes to mind with the name is the same two things: ice and light. Endless blue white snowfields and the grey of bare, wind scoured rock, held under a sky so thin it darkens almost to black at the top. Then, for a few minutes at dawn, the sun clears the horizon and the summit catches fire. A narrow band of warm gold and coral runs along the ridgeline while everything below it stays frozen and blue. That contrast, a vast cold calm broken by one short band of warmth, is the whole feeling the theme is trying to keep on screen while you work. The source description says as much in one line. Soft blues and greys mimic the icy terrain, while subtle hints of warmer color evoke the golden hues of dawn breaking over snow capped peaks. That one sentence decides almost everything that follows. The bulk of the theme stays cool and quiet, and warmth is rationed out in small amounts, used only where it earns attention. You can see the whole palette as one warm and cool split. The cool family carries the structure: the glacial teal accent [#246A89](https://codigrate.com/tools/color/246A89), the deep navy text [#0E3448](https://codigrate.com/tools/color/0E3448), and the pale blue greys of every panel. The warm family is tiny on purpose: a single dawn coral [#ED7E5A](https://codigrate.com/tools/color/ED7E5A) marking the active tab and the search match, the one place your eye should jump to. ## The Harmony: Ice Against Dawn That split is not just a mood, it is a specific relationship you can name. Drop the two anchors on the color wheel and the glacial teal lands at about 198 degrees while the dawn coral lands at about 15, almost exactly across from it. Two hues that sit opposite each other on the wheel are [complementary](https://codigrate.com/blog/harmony-in-opposites), the pairing that carries the most contrast color theory has to offer. Everest is built on a single complementary pair: cold blue against warm orange, the same ice against dawn the mountain shows you, expressed as the strongest two color tension there is. What keeps that tension from turning loud is how unevenly the two sides are spent. The cool half is filled out analogously, greens easing through teals into blues, so the entire interface reads as one calm family. The warm complement is left almost alone, a lone accent doing all the highlighting. Maximum contrast, used exactly once. That restraint is the whole difference between a complementary scheme that feels like alpine light and one that feels like a warning label. ## Backgrounds, Built In Layers A light theme lives or dies on its neutrals. Get them wrong and every panel either floats with hard borders or blurs into one flat sheet. Everest never draws a hard line between panels. Instead it stacks three near neutrals and lets a half step of lightness do the dividing: - Surface [#CADAE0](https://codigrate.com/tools/color/CADAE0), the outermost frame the window sits in. - Window [#E4ECEF](https://codigrate.com/tools/color/E4ECEF), the tool windows, tabs and panels. - Editor [#FDFEFF](https://codigrate.com/tools/color/FDFEFF), the page your code is written on, an off white with the faintest blue in it rather than a clinical pure white. Read from the outside in and the three get lighter by a small step each time. That gradient is what gives a borderless interface its depth. Nothing shouts, yet every region is legible. ## One Foreground, Several Voices Backgrounds set the stage. The foreground is where the reading actually happens, and Everest leans on one main color for it: a deep navy [#0E3448](https://codigrate.com/tools/color/0E3448), not pure black. Against the off white editor that lands the contrast in a comfortable band, strong enough to read all day, soft enough that it never buzzes the way black on white can. From that one anchor the theme builds a quiet hierarchy. Secondary text drops to a muted slate [#567B8A](https://codigrate.com/tools/color/567B8A), and comments go a step further into a misty blue grey [#6E828F](https://codigrate.com/tools/color/6E828F) set in italic, so the notes you wrote sit behind the code you run without disappearing. That is exactly the contrast ladder we walk through in [the readability post](https://codigrate.com/blog/introduction-to-readability): same hue family, different weights, so importance reads as lightness rather than as a different color shouting for space. ## Syntax: A Cool Skeleton With Warm Sparks Open a file and the warm and cool split does the heavy lifting. The skeleton of the language stays cool, in the mountain's own colors: - Keywords in a deep fir green [#2E674F](https://codigrate.com/tools/color/2E674F), bold, so the shape of the language is the first thing you see. - Strings and numbers in a steady teal [#005E79](https://codigrate.com/tools/color/005E79), the literal values reading as one calm group. - Functions and methods in a brighter green [#007A47](https://codigrate.com/tools/color/007A47), and local variables in a clear blue [#1A6D9F](https://codigrate.com/tools/color/1A6D9F). - Comments in that same misty grey [#6E828F](https://codigrate.com/tools/color/6E828F) from the foreground ladder. Then come the sparks. The few warm colors are saved for the parts of the code that change from one call to the next: parameters in a brick red [#8F4446](https://codigrate.com/tools/color/8F4446), annotations and metadata in a rust [#A64825](https://codigrate.com/tools/color/A64825), markup tags in a soft clay [#8D5F5D](https://codigrate.com/tools/color/8D5F5D). Because warmth appears so rarely, it always means the same thing, look here, this is the part that varies. A pair of deeper accents, plum for globals and a muted purple for static members, round out the set without ever turning loud. ## The Final Product Here is Everest assembled again. The blue grey layers read the same way in a JetBrains IDE and in Sublime Text, Slack and Ghostty pick up the same cool light, and in Rhino the viewports turn into a bright snowfield, so a light desk stays one mountain from the editor to the modeling tool.
Everest theme in a JetBrains IDE
JetBrains
Everest theme in Sublime Text
Sublime Text
Everest theme in Slack
Slack
Everest theme in Ghostty
Ghostty
Everest theme in Rhino
Rhino
## Reading It Back Put the pieces together and the theme tells one story. Layered neutrals give depth without borders. A single navy foreground, stepped down through slate and grey, keeps the reading calm. A cool syntax palette holds the structure while a small warm budget marks what moves. Nothing here is decoration for its own sake. Every color is doing a job, and the jobs all point back to the same mountain. Want to try it in the editor you already work in? Everest installs on JetBrains, VS Code, Cursor, Chrome, Slack and Ghostty, all from its [theme page](https://codigrate.com/theme?product=everest). ## Frequently Asked Questions ### What is the Everest theme? Everest is one of Codigrate's light themes, built around the icy blues and greys of Mount Everest with a few warm accents borrowed from dawn light on the peaks. It pairs a near white editor with a deep navy foreground, so code stays calm and easy to read for long stretches. ### Why does a good light theme use more than one background color? Depth. Everest stacks three near neutrals, from the outer surface at #CADAE0 through the window panels up to the near white editor at #FDFEFF. Each panel sits a step lighter than the one behind it, so your eye can tell the toolbar from the editor without any hard borders. ### How are the syntax colors chosen in Everest? The structure of the code is painted in cool colors, fir green keywords, teal strings, blue variables and misty grey comments, so the bulk of the screen stays in the mountain's palette. The few warm colors, a brick red for parameters and a rust for annotations, mark the parts that change from call to call, so warmth always means attention. ### Is a light theme harder on the eyes than a dark one? Not on its own. What tires eyes is contrast that is too high or too low, not light versus dark. Everest keeps its foreground a deep navy rather than pure black and its background a soft off white rather than glaring white, which lands the contrast in a comfortable range for a full working day. --- # Anatomy of a Dark Theme: Aurora Borealis > Anatomy of Aurora Borealis, a dark IDE theme: a deep blue night backdrop, a soft grey foreground, and syntax in the real colors of the Northern Lights. - URL: https://codigrate.com/blog/anatomy-of-the-aurora-borealis-theme - Published: 2026-06-22 - Updated: 2026-10-08 - Category: Inspiration - Theme: [Aurora Borealis](https://codigrate.com/theme?product=aurora-borealis) - Publisher: Codigrate (https://codigrate.com) Aurora Borealis takes its colors from a clear night sky far enough north to see the lights: a deep blue dark with ribbons of green drawn across it, fading up into blue and, on the rare best nights, into violet and rose. The job of the theme is to keep that night sky on screen while you work, calm enough to read for hours. Here is how Aurora is built, color by color, and why each one sits where it does. Its light twin, [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme), gets the same teardown. ## The Northern Lights In A Palette The source description sets the brief in one breath. Dark blues and teals serve as the backdrop, while lighter accents echo the ethereal colors of the Northern Lights, all of it tuned to be easy on the eyes so you can focus. So the structure of the theme is the night, deep and quiet, and the color is the aurora, rationed out as light against it. You can read the whole palette as the two halves of that scene. The night is a family of deep blue greys, the editor [#142B37](https://codigrate.com/tools/color/142B37) and the panels just above it. The aurora is the small set of colors that glow on top: a glacial sky blue [#7AC6F5](https://codigrate.com/tools/color/7AC6F5) for the accent and a Northern Lights green [#049682](https://codigrate.com/tools/color/049682) for the active highlight, the two colors a real aurora shows most often. ## The Harmony: A Cool Analogous Glow Where Everest was built on a single complementary pair, cold against warm, Aurora is built the opposite way, on colors that sit close together. Drop its two signature accents on the color wheel and the sky blue lands near 203 degrees and the aurora green near 172, only about thirty degrees apart. Colors that close are [analogous](https://codigrate.com/blog/introduction-to-color-harmony), the most cohesive relationship there is, and that is exactly why a real aurora reads as one glowing thing rather than separate colors fighting. The blues, teals and greens all belong to one cool family. The syntax stretches that family a little further, up the wheel into the violets and magentas that a strong aurora throws off at high altitude. So the full set sweeps from green through teal and blue into violet, a single arc across the cool half of the wheel. Nothing in it is warm, which is what keeps the theme feeling like cold night air. ## Backgrounds, Built In Layers A dark theme lives or dies on its neutrals just as a light one does, and Aurora never draws a hard line between panels. It stacks three near neutrals and lets a small step of lightness do the dividing: - Surface [#1A3746](https://codigrate.com/tools/color/1A3746), the outermost frame the window sits in. - Window [#123243](https://codigrate.com/tools/color/123243), the tool windows, tabs and panels. - Editor [#142B37](https://codigrate.com/tools/color/142B37), the page your code is written on, a deep blue grey rather than a flat black, so the night has colour in it. None of these is pure black on purpose. Black against bright text makes the harshest contrast there is, and it shows every halo and smudge a screen can throw. A deep blue grey keeps the contrast in a gentler band and reads as a night sky, which is the whole point. ## One Foreground, Several Voices The reading happens on the foreground, and Aurora leans on one main color for it: a soft grey [#B0B9BE](https://codigrate.com/tools/color/B0B9BE), not pure white. Against the deep blue editor that lands the contrast comfortably, bright enough to read all night, soft enough that it never glares the way white on black can. From that one anchor the theme builds its quiet hierarchy. Secondary text drops to a muted slate blue [#85A2B3](https://codigrate.com/tools/color/85A2B3), and comments go further still into a soft lavender [#A996B9](https://codigrate.com/tools/color/A996B9) set in italic, so your notes sit behind your code without vanishing. That is the same contrast ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): importance read as lightness, not as another loud colour. ## Syntax: The Aurora's Own Colors Open a file and the sky lights up. The structure of the language is painted in the aurora's real bands: - Keywords in a magenta [#BB719B](https://codigrate.com/tools/color/BB719B), the rare high band of the aurora, so the shape of the language is the first thing you see. - Strings and numbers in a clear blue [#549EFF](https://codigrate.com/tools/color/549EFF), the literal values reading as one calm group. - Functions and globals in a Northern Lights green [#73D379](https://codigrate.com/tools/color/73D379), local variables in a teal [#05C0A6](https://codigrate.com/tools/color/05C0A6), and methods in the sky blue accent [#7ACEF5](https://codigrate.com/tools/color/7ACEF5). - Parameters in a soft violet [#BAA5FF](https://codigrate.com/tools/color/BAA5FF) and comments in that same quiet lavender from the foreground ladder. Line them up and they are the aurora itself: green most of all, then blue and teal, with violet and magenta saved for the parts that change. Because the whole set stays on the cool, glowing side of the wheel, the code reads as one continuous light rather than a scatter of unrelated colours. ## The Final Product That is the theme in pieces. Put back together it looks like this, first in a JetBrains IDE, where Codigrate themes started, then in Sublime Text, Slack, Ghostty and Rhino. The night blue goes everywhere the theme goes, so the editor, the chat, the shell and even a 3D model end up under the same sky.
Aurora Borealis theme in a JetBrains IDE
JetBrains
Aurora Borealis theme in Sublime Text
Sublime Text
Aurora Borealis theme in Slack
Slack
Aurora Borealis theme in Ghostty
Ghostty
Aurora Borealis theme in Rhino
Rhino
## Reading It Back Put the pieces together and the theme tells one story. A deep blue night gives depth without ever going black. A soft grey foreground, stepped down through slate and lavender, keeps the reading calm. A cool analogous palette, green through blue into violet, carries the syntax in the aurora's own colors. Every color is doing a job, and the jobs all point back to the same northern sky. Want to try it in the editor you already work in? Aurora Borealis installs on JetBrains, VS Code, Cursor, Chrome, Slack and Ghostty, all from its [theme page](https://codigrate.com/theme?product=aurora-borealis). ## Frequently Asked Questions ### What is the Aurora Borealis theme? Aurora Borealis is Codigrate's flagship dark theme, built around the deep blues of the Arctic night sky and the green, blue and violet light of the Northern Lights. A near black blue editor sits under a soft grey foreground, with the aurora's own colors carrying the syntax, so it stays calm and easy to read through a long session. ### Why is the background a deep blue instead of pure black? Pure black against bright text makes the highest possible contrast, which can buzz and tire the eyes, and it shows smudges and halos on many screens. Aurora uses a deep blue grey instead, around #142B37 for the editor, so the contrast with the soft grey text lands in a comfortable band and the whole screen reads like a night sky rather than a void. ### How are the syntax colors chosen in Aurora Borealis? They are the aurora's real colors. Keywords take a magenta, strings a clear blue, functions and globals a Northern Lights green, variables a teal, and comments a quiet lavender. Green, blue and violet are exactly the bands a real aurora glows in, so the code lights up in the same palette as the sky the theme is named for. ### Is a dark theme better for your eyes? Neither dark nor light is automatically easier; what matters is landing the contrast in a comfortable range and avoiding glare. A dark theme like Aurora helps most in a dim room, where a bright white page can feel harsh, by keeping the background low and the foreground soft rather than pure white on pure black. --- # Reading the Color Wheel > The color wheel explained: where its circle comes from, why hue is an angle, what the pale hub and slices mean, and how to read relationships off the ring. - URL: https://codigrate.com/blog/the-color-wheel - Published: 2026-06-21 - Category: Color Theory - Publisher: Codigrate (https://codigrate.com) The color wheel is the diagram that turns choosing colors from a guess into something you can read. Every hue there is has a fixed seat on it, and once you know how those seats are arranged, a question like which colors belong together stops being a matter of taste and becomes a matter of looking. The shape is not arbitrary, and neither is the order of the colors around it. Both come from somewhere, and both are telling you something. Here is where the wheel comes from and what it is actually showing you. ## Hue, And Where It Comes From Start with what the wheel is made of: hue. Hue is simply which color a thing is, red or green or blue, before you say anything about how pale or dark it looks. And which color you see is fixed by the wavelength of the light reaching your eye. Long waves read as red, short waves as violet, and every other hue falls in between in one set order, red, orange, yellow, green, blue, violet. Send sunlight through a prism, or catch it in a raindrop, and you get that exact run every time, never reshuffled. We took that idea apart in [How Light Makes Colors](https://codigrate.com/blog/how-light-makes-colors). For the wheel, the one thing to carry over is that hue is real, measured light, arriving in a fixed sequence. ## From A Straight Line To A Ring Out in the world that sequence is a straight line, and it has two ends that never meet. Past red lies infrared and past violet lies ultraviolet, both invisible, neither bending back toward the other. So the wheel is not something nature handed us. It is something we built. We take the line, curl it around, and close the gap between violet and red with a band of magentas and purples, colors that no single wavelength makes, the ones your eye only invents when red light and violet light arrive together. The line becomes a ring with no seam. And the moment it does, hue turns into an angle: red at 0 degrees, green a third of the way round at 120, blue at 240, and the magentas carrying you the last stretch home to red. Try it below. Drag the marker around the ring, or slide the bar beneath it. The bar is the spectrum still in its honest straight line, and the ring is that same line curled shut. Move one and the other follows, because they hold the same number: the hue, shown in the centre as its angle from 0 to 360. ## What's Actually On The Wheel A full color wheel can carry a second dimension on top of hue. Going around it is hue, the angle. Going inward, toward the center, is saturation: out at the rim each color sits at full strength, and as you move in it fades toward white, which is why so many wheels have a pale hub. The wheel above keeps to that rim on purpose, every hue at full strength, so nothing pulls your eye off the angle, the part worth getting comfortable with first. Saturation is a story of its own. The ring itself is usually built from a few anchor hues with their blends filling the space between. Three do most of the work, sitting a third of a turn apart, and the colors in the gaps are simply those three mixed. Land exactly between two anchors and you get their direct blend; step to either side of that and you get finer mixes again. It is the same move repeated the whole way around: a handful of pure hues, and everything else is the measured distance between them. That is the trick of the wheel. It turns mixing, which is fiddly, into position, which is easy to see. ## Reading The Wheel Once hue is a position, every relationship becomes a direction. Colors that sit side by side share a mood, because their wavelengths are close. Colors straight across the ring clash the hardest, the high contrast you reach for when one thing has to stand out. Space three out evenly and you get a balanced set. None of that can be read on the straight spectrum, where across from means nothing. The circle is the thing that makes distance meaningful. You do not have to hold any of this in your head. Open the Codigrate color tool, drop in any color, and the number it labels hue is exactly that angle, the color's seat on the ring from 0 to 360. The quietly strange part is that the figure was a measurement of light the whole time, just curled into a circle so you could point at it. ## Frequently Asked Questions ### What is the color wheel? The color wheel is a diagram that arranges every hue in a circle, in the same order light gives them: red, orange, yellow, green, blue, violet. Its job is to turn the question of which colors belong together into something you can read off a position instead of guessing. ### Why is the color wheel a circle when light is a straight spectrum? Out in the world the spectrum is a straight line with two ends that never meet, infrared past red and ultraviolet past violet. We bend that line into a ring and close the gap with the magentas and purples your eye only sees when red light and violet light arrive together. The circle is our representation, built so that distance around it becomes meaningful. ### What does hue mean on the color wheel? Hue is which color a thing is, before you say anything about how pale or dark it looks. On the wheel hue becomes an angle from 0 to 360 degrees: red sits at 0, green a third of the way round at 120, and blue at 240. The Codigrate color tool labels that exact angle for any color you drop in. ### Which colors sit opposite each other on the color wheel? Colors straight across the ring are complementary, and they clash the hardest, which is the high contrast you reach for when one element has to stand out. Colors that sit side by side share a mood because their wavelengths are close, and three spaced evenly around the wheel give you a balanced set. --- # How Light Makes Colors > Every color is made of light. See how red, green and blue light add up to build any color on a screen, and why screens glow instead of stain like paint. - URL: https://codigrate.com/blog/how-light-makes-colors - Published: 2026-06-20 - Category: Color Theory - Theme: [Aurora Borealis](https://codigrate.com/theme?product=aurora-borealis) - Publisher: Codigrate (https://codigrate.com) Picture the northern lights washing across a night sky in slow ribbons of green, violet, and soft red. There is no paint up there and no canvas, just light, glowing in colors that seem to arrive from nowhere. The screen in your hand pulls off the very same trick, only smaller and whenever you ask it to. It does not hold paint or ink. It makes color by giving off light, and once you see how that works, color stops being a mystery and becomes something you can build on purpose. The whole thing comes down to a handful of lights and how brightly each one shines. ## Light Travels As Waves Light moves a bit like ripples spreading across water, in waves. The strength of a wave is what your eye reads as brightness. A strong, vivid wave is bright light. A faint wave is dim light. No wave at all is no light, which your eye reads as black. The aurora is this idea written across the whole sky: gas high in the atmosphere gives off light, and the brighter that light glows the more vividly the night is painted. Hold on to that one idea, because brightness being the strength of a wave is the foundation for everything below. ## A Screen Builds Color From Three Lights Get very close to a screen and each tiny dot, each pixel, is really three even tinier lights sitting side by side: one red, one green, and one blue. They never melt into a new kind of light. They simply shine next to each other, and from a normal distance your eye blends them into a single color. That is why this is called additive color. You start in complete darkness and add light until you reach the color you want. This is the opposite of mixing paint. Paint starts on a white page and grows darker the more you add, because every layer soaks up light. A screen starts black and grows brighter the more you add, because every dot gives light off. The aurora follows the same logic as the screen, a dark sky lit up from nothing, never a bright page stained over. Every color a screen can show is just these three lights at different brightnesses. Hand the screen a recipe for how bright to make red, green, and blue, and it reproduces your exact color every time. That recipe is the RGB value, three numbers from 0 to 255, one for each light, where 0 means a light is off and 255 means it is shining at full strength. ## Turning Each Light Up And Down Here is where it clicks. In the mixer below, each of the three lights is a wave in its own color, and all three sit on the same line so you can watch them stack up. Turning a light up makes its wave glow brighter, turning it down makes it fainter, and at zero the wave is gone. So pure red, written ff0000, is a bright red wave with green and blue gone. A soft, dusty olive like 808000 is a fainter red and green together, with blue gone. Black, 000000, is no light at all, so there are no waves. A dimmer light is simply a fainter wave. Try it below. Type a color or pick one, and watch the three lights inside it brighten and fade as you change it.

Disclaimer: This mixer is a simplified picture made to build intuition, not a precise physics simulation. Read its waves and numbers as a feel for how three lights add up, not as exact real world measurements.

## Adding Lights Together Now to the mixing itself. Bring red and green up together and where their waves overlap your eye reads the pair as yellow, ffff00, even though there is no yellow light anywhere, only red and green shining at once. Bring the blue light up as well and all three together come out as white, ffffff, which is why a screen showing plain white is quietly running all three of its lights at full. Take them all away and you are back to black. Green plus blue gives cyan, red plus blue gives magenta, and every shade in between is just those three dials set to different points. That is exactly what the sky is doing during an aurora. The gases up there give off their own light, oxygen its greens and reds, nitrogen its blues and violets, and your eye adds the whole display together into the colors you finally see. The sky becomes one enormous additive screen, running on the same rules as the one in your pocket: a few lights, each at its own brightness, blended by your eye into a single picture. Once you start thinking in lights instead of paint, every color on a screen becomes a simple question: how bright do you make each one? ## Where This Leaves You That is the quiet engine behind every image you have ever watched glow on a display, and behind every aurora you have ever stopped to watch. No paint, no ink, just a handful of lights leaning on each other in the right amounts. To work with exact values, our [color tool](https://codigrate.com/tools/color) takes any hex code and breaks it down into its RGB, HSL, and other equivalents, so you can move between them with confidence. ## Frequently Asked Questions ### What is additive color? Additive color is how a screen makes color: it starts in complete darkness and adds light until it reaches the color you want. Each pixel is three tiny lights, red, green and blue, shining next to each other, and your eye blends them into one color. It is the opposite of mixing paint, which starts white and grows darker. ### How does a screen make every color from just three lights? By changing how brightly each light shines. Red and green up together read as yellow, all three at full make white, and none at all is black. Green plus blue gives cyan, red plus blue gives magenta, and every shade in between is those three dials set to different points. ### What does an RGB value actually mean? It is the recipe for how bright to make each light: three numbers from 0 to 255, one for red, one for green and one for blue, where 0 means a light is off and 255 means it shines at full strength. Hand a screen that recipe and it reproduces your exact color every time. ### Why do screens glow instead of stain like paint? Because a screen gives off light rather than soaking it up. Paint starts on a white page and grows darker as every layer absorbs light, while a screen starts black and grows brighter as every dot adds light. An aurora follows the same additive logic, a dark sky lit up from nothing. --- # Harmony in Opposites > Complementary color harmony: why opposite colors lift each other, why balance means keeping one small, the split complement, and how to use opposites well. - URL: https://codigrate.com/blog/harmony-in-opposites - Published: 2026-06-19 - Category: Palette & Harmony - Publisher: Codigrate (https://codigrate.com) Most color advice tells you to keep things in the same family, hues that already agree. But some of the most striking color comes from the opposite move: two colors from across the wheel, set against each other. Picture an orange koi turning through cool blue water. Each color makes the other look more alive, the orange warmer, the water deeper and cooler. Japanese aesthetics has circled this idea for centuries: opposites held in balance rather than blended into a quiet middle. A koi pond is the everyday version of it, still water and restless fish, a warm body against a cool ground, calm and motion in one frame. Two opposites that complete each other instead of cancelling out. That is the subject here: why opposite colors, handled with a little restraint, make a harmony of their own. ## Why Opposites Sing Complementary colors are the pairs that sit directly across the color wheel: orange and blue, red and green, yellow and violet. Every hue has exactly one true opposite, the color you would mix it with to cancel both down to grey, and any color tool will point to it in a second. The instinct worth building is reaching for it on your own, so a warm color sends your mind straight to the cool one across from it. Set a hue beside that opposite and each looks more intense than it does alone. The eye exaggerates the difference right at the border, an effect called simultaneous contrast, so the warm color reads warmer and the cool one cooler. Stare at a strong color for a while, glance at a blank wall, and you will even see a faint patch of its opposite floating there, the same effect running in reverse. Our eyes are built to notice the gap between opposites, which is exactly why putting them together gives a palette real energy. They do not merely tolerate each other. They make each other look better. ## Balance Is Everything Opposites get a bad name because people imagine them shouting, and the cure is balance: keep one color small. A sunset is a thin band of warm light over a wide cool sea. A single red leaf stands out on a green lawn. The bold color is there, but it takes up little room, and the calm color carries the rest. Loud is easy. Loud and calm together is the craft. The mistake almost everyone makes is splitting the space evenly. At half and half two opposites stop feeling alive and start to vibrate against each other, which is tiring to look at for more than a moment. So give one color most of the room and save its opposite for the few spots where you want the eye to land. Mostly one hue with a single opposite accent reads as a deliberate choice. Half and half reads as a fight. ## Warm Against Cool, on a Screen The most reliable opposite pairing is also the easiest to feel: a warm hue against a cool one, the oldest contrast there is, light and shadow, fire and water. Part of why it works so often is that skin tones sit on the warm side, so a cool backdrop makes a face stand out without anyone thinking about it. A theme leans on the same trick, a cool background with a few warm accents on the things that matter, a keyword catching light against a calm deep panel. There is one caution when opposites meet text. Two pure opposites can sit at nearly the same lightness, so the hue shouts while the words underneath stay hard to read. Bright is not the same as legible. When a palette has to carry type, lean on a real difference in lightness, not just opposite hue. Our piece on [readability](https://codigrate.com/blog/introduction-to-readability) goes into that side in detail. ## A Softer Opposite Sometimes a true complement is more than a design wants. The gentler option is split complementary: instead of the exact opposite, you use the two hues sitting just beside it. You keep most of the warm against cool pull, but you lose the hard buzz two pure opposites set off where they meet at a sharp edge. A lot of calmer themes live right here, with a cool base and accents that lean warm without marching all the way across the wheel. ## Putting It to Work The recipe is short. Choose two opposites for the tension, then give nearly all the space to one and let the other appear only where it counts. That single ratio is what separates a palette that looks designed from one that fights itself. It is how our themes pair a calm background with a few warm accents, and you can build the same way in the [palette generator](https://codigrate.com/tools/palette). ## Frequently Asked Questions ### What are complementary colors? Complementary colors are the pairs that sit directly across the color wheel, like orange and blue or red and green. Every hue has exactly one true opposite, the color you would mix it with to cancel both down to grey. ### Why do opposite colors look better together? Set a hue beside its opposite and the eye exaggerates the difference right at the border, an effect called simultaneous contrast. The warm color reads warmer and the cool one cooler, so the pair has real energy. They do not merely tolerate each other, they make each other look better. ### How do you use complementary colors without them fighting? Keep one color small. At half and half two opposites start to vibrate, which is tiring to look at. Give one hue most of the room and save its opposite for the few spots where you want the eye to land. Mostly one color with a single opposite accent reads as a deliberate choice. ### What is split complementary? A softer opposite. Instead of the exact complement you use the two hues sitting just beside it. You keep most of the warm against cool pull but lose the hard buzz two pure opposites set off where they meet, which is why a lot of calmer themes live there. --- # Introduction to Readability > How contrast decides whether text is readable: the WCAG 2 ratio, the APCA Lc score from WCAG 3, and why a color reads differently as ink than as background. - URL: https://codigrate.com/blog/introduction-to-readability - Published: 2026-06-18 - Category: Accessibility - Publisher: Codigrate (https://codigrate.com) Every theme we build comes down to one quiet question: can you read the text. A background can be gorgeous and a syntax palette can be clever, but if the comments wash out against the editor or a keyword glows too bright to scan, the theme has failed at the only job that matters. Readability is whether the words actually come through, and it rests almost entirely on contrast, the difference between the text and whatever sits behind it. The good part is that you do not have to guess. Readability has numbers, and this is a short guide to the two that count, the WCAG 2 ratio and the newer APCA, plus how to read them without a headache. ## The WCAG 2 Ratio The first number worth learning is the WCAG 2 contrast ratio, the one baked into almost every accessibility checker and design audit. It compares the relative luminance of two colors, the text and the background behind it, and gives you a value that runs from 1 to 1, meaning no contrast at all, up to 21 to 1, which is pure black on pure white. The thresholds are easy to keep in your head. Normal body text wants 4.5 to 1 to pass the AA level and 7 to 1 to reach AAA. Large or bold text gets an easier bar, 3 to 1 for AA, because bigger shapes survive on less contrast. This one ratio carried the web for years, and it still catches the worst mistakes. Pale grey text on a white card, the favourite sin of modern design, fails it on sight. If you only ever check one thing, check this. But the ratio has a blind spot that matters a great deal for themes. It does not care about polarity. It hands you the same score whether your color is the ink or the page, even though dark text on a light background and light text on a dark background never read the same to the human eye. It also flatters the dark end of the range, so two deep colors can pass on paper while looking like one smear on a real screen. Anyone who has built a dark theme has felt that gap: the math says fine, the eye says mush. ## APCA, the WCAG 3 Way APCA is the answer to that blind spot, and it is the contrast model heading into WCAG 3. Instead of a flat luminance ratio it uses a perceptual model, tuned to how we actually read text at different sizes and weights, and it pays attention to which color sits on top. Its score is called Lc, for lightness contrast, and it runs roughly from 0 to about 106 with a sign attached. A positive number means dark text on a lighter background. A negative number means light text on a darker background. Because APCA knows the direction, it gives you two different answers for the same pair depending on which color is the text. Put your brand color on white and you get one score. Put white text on that same brand color and you get another. That is not a glitch. It is the entire point, and it is exactly the call you make when you design an editor: is this hue the page, or is it the ink. ## Both, Side by Side We do not treat these two as rivals. WCAG 2 is the rule most audits and most clients still ask for, so it simply has to pass. APCA is the better read on how the text will actually feel, especially in the dark themes we ship the most of. So when we choose a foreground for a background, we look at both at once. Take Codigrate Blue, our own #00BAFF. It is a bright, friendly cyan, and it makes a perfect teaching case. As text on a white page it fails badly. The ratio comes in low and the APCA score is weak, because a light color on a light background never gives the eye enough edge to grab. Make it the background instead, with dark text on a #00BAFF button, and it reads cleanly. The same color fails as ink on a white page yet works as the surface under dark text, which is the whole reason you cannot judge a color until you know which one is the ink. ## The Takeaway None of this needs to slow you down. Pick a foreground and a background, read the WCAG ratio and the APCA score, and nudge whichever color moves more easily until both clear the bar. It is the same pass we run on every theme before it ships, which is why the text stays readable long after the wallpaper stops being the thing you notice. For conversions, color schemes and a color blindness simulator alongside this check, open the [color tool](https://codigrate.com/tools/color). ## Frequently Asked Questions ### What is a good contrast ratio for text? On the WCAG 2 scale, normal body text wants at least 4.5 to 1 to pass AA and 7 to 1 to reach AAA. Large or bold text gets an easier bar of 3 to 1, because bigger shapes stay readable on less contrast. The scale runs from 1 to 1 for no contrast up to 21 to 1 for black on white. ### What is the difference between WCAG 2 contrast and APCA? WCAG 2 is a flat luminance ratio that gives the same score no matter which color is the text. APCA, the model heading into WCAG 3, uses a perceptual model tuned to how we actually read and pays attention to which color sits on top, so it returns a direction aware score called Lc. ### Why does the same color pass on white but fail as text? Because polarity matters. A light color like Codigrate Blue (#00BAFF) as text on a white page never gives the eye enough edge, so it reads poorly. Flip it around with white text on a #00BAFF button and it reads cleanly. The same two colors give opposite results, which is why you cannot judge a pairing until you know which one is the ink. ### Which contrast measure should I trust? Both, side by side. WCAG 2 is the rule most audits and clients still ask for, so it has to pass. APCA is the better read on how text will actually feel, especially in the dark themes we ship most. We check both before a theme goes out. --- # Introduction to Color Harmony > Color harmony made simple: analogous, monochrome, complementary, split, triadic and tetradic schemes, why each one works, and a live tool to build your palette. - URL: https://codigrate.com/blog/introduction-to-color-harmony - Published: 2026-06-17 - Category: Palette & Harmony - Publisher: Codigrate (https://codigrate.com) Once you can write a single color down, the next question is which colors belong together. That is what color harmony answers. It is the difference between a palette that feels designed and one that feels like a handful of swatches thrown at a wall. The good news is that harmony is not a matter of taste or luck. A few simple relationships between hues give you combinations that almost always work, and once you can see them you will spot them everywhere, from movie posters to the editor theme you are reading this in. ## Analogous Harmony: Neighbours That Agree The gentlest harmony uses hues that sit right next to each other, the close neighbours of your base color. Blue with blue green and green. Orange with red and yellow. Because they share so much underlying color, an analogous palette never fights itself. It feels calm, settled and cohesive, the way a forest or a sunset feels cohesive. The risk with analogous colors is that they can get so agreeable that everything blurs together. The fix is to vary lightness rather than hue. Keep the colors in the same family but spread them from dark to light so your eye can still tell them apart. You get the calm of one mood with enough separation to stay readable. ## Monochrome Harmony: One Hue, Many Shades Take that idea to its limit and you reach monochrome: a single hue, varied only in lightness and saturation. One blue carried from near black to near white, and nothing else. With no second hue to manage there is nothing to clash, so monochrome is the most foolproof scheme of all. It reads as quiet, clean and quietly confident. The catch is the mirror image of analogous. With only one hue, every bit of contrast has to come from light and dark, so keep the range wide enough that your darkest and lightest steps sit clearly apart, and let one shade carry the emphasis. ## Complementary Harmony: Opposites That Pop For the opposite of calm, pair two hues that sit directly opposite each other. Blue and orange. Red and green. Yellow and violet. Because they are opposites, each one makes the other look more intense, so a complementary pair has the most energy of any scheme. That is exactly why it is everywhere in film and sport: a cool blue scene with one warm orange face reads instantly. The catch is that all that energy is tiring in equal amounts. The trick, every single time, is to let one color dominate and use its complement only as a small accent. A mostly blue editor with a few warm highlights on the keywords feels alive. Split fifty fifty and it starts to vibrate. Spend most of the screen on one hue and save the opposite for the few things that matter. ## Split Complementary Harmony: A Softer Opposite Split complementary keeps the energy of opposites but takes the edge off. Instead of your base and its exact opposite, you pair the base with the two hues sitting on either side of that opposite. You still get the warm against cool pull that makes complementary colors snap, but the two partners differ slightly from each other, so the palette has more range and less of the hard vibration two pure opposites set off where they meet. The same rule still applies: let the base hue lead and treat the two accents as support. Because those accents sit close together, they read almost as one bright note against the base, which makes split complementary one of the most forgiving schemes to get right. It is the move to reach for when a full complement feels like too much. ## Triadic Harmony: Three That Balance A triadic scheme takes three hues spread evenly apart. The most famous triad is the primaries, red, yellow and blue. Triadic palettes are lively and colorful, yet because the three hues are evenly balanced they rarely feel chaotic. They give you more variety than a pair without tipping into noise. As with complementary, an even spread does not mean balance on the screen. Let one of the three lead and treat the other two as support, or the result gets busy fast. Three equal loud colors is a circus. One confident color with two measured companions is a palette. ## Tetradic Harmony: Two Pairs at Once A tetradic scheme is two complementary pairs together, four hues that box in the wheel. It is the richest palette you can pull from a single base, and also the hardest to keep calm, because now there are two sets of opposites all tugging at each other. Spent well it gives a design real range. Spread flat it turns to noise faster than any other scheme. The rule is the familiar one, only stricter. Pick a single hue to lead, let the other three play support, and lean the whole thing warm or cool so the four never split the screen evenly. Tetradic rewards restraint more than anything else on this page. Most of these schemes come from one idea: choosing hues at set distances from a base color, with monochrome as the case of no distance at all. Try them side by side. Pick a base color and watch its analogous, monochrome, complementary, split complementary, triadic and tetradic groups update together. ## How To Actually Use A Harmony A scheme tells you which hues agree, not how much of each to use. That second part is where palettes are won or lost. A reliable starting point is to let one color cover most of the surface, a second carry the supporting areas, and a third appear only as the occasional accent. Pick the harmony for the relationship, then spend the colors unevenly. This is why the themes we build lean on one dominant background hue with a small, well chosen set of accents drawn from a single scheme. The harmony keeps the colors related; the proportions keep them calm. If you want to keep exploring, our [palette generator](https://codigrate.com/tools/palette) lets you build a palette by hand, pull one straight out of an image, or roll a random one, then check its harmony and copy the hex codes, so you can create your own color palette with harmony and turn any of these ideas into something you will actually ship. ## Frequently Asked Questions ### What is color harmony? Color harmony is the set of relationships between hues that make them look good together. Instead of guessing, you choose colors at set distances from a base hue: neighbours, opposites, or evenly spaced groups. Those relationships give combinations that almost always work. ### Which color harmony should I use? Analogous neighbours feel calm and cohesive, monochrome stays in one hue for the cleanest look, complementary opposites carry the most energy, split complementary softens that opposite, triadic gives a lively balance of three, and tetradic offers the richest range but needs the most restraint. Pick the one whose mood matches your design. ### Why does my palette look busy even when it follows a scheme? A scheme tells you which hues agree, not how much of each to use. The fix is proportion: let one color cover most of the surface, a second carry the supporting areas, and a third appear only as an accent. Spend the colors unevenly and even a bold scheme stays calm. ### What is the difference between complementary and split complementary? Complementary uses your base and its exact opposite for maximum contrast. Split complementary swaps that single opposite for the two hues sitting on either side of it, so you keep the warm against cool pull but lose the hard vibration two pure opposites set off where they meet. --- # Introduction to Color Theory > A clear, practical guide to the three color models, RGB, HEX, and CMYK. See real values, learn why screens and print differ, and convert any color live. - URL: https://codigrate.com/blog/introduction-to-color-theory - Published: 2026-06-16 - Category: Color Theory - Publisher: Codigrate (https://codigrate.com) Color is the first thing anyone notices, on a screen, in a logo, on a printed page. Before you ever think about which colors look good together, there is a quieter and more fundamental question to answer. How do you write a single color down so a screen, a printer, and another person all understand exactly which one you mean? That is what color models are for, and getting comfortable with them is the real starting point of color theory. This post stays on that foundation: the three notations you will meet everywhere, which are RGB, HEX, and CMYK. ## Why A Color Needs A Notation Saying a color out loud almost never works. If you tell ten people to picture "blue", you get ten different blues. A computer has the same problem, except it cannot guess at all. It needs a precise recipe. A color model is that recipe: a small set of numbers that pin down one exact color with no ambiguity. Pick the right model and you can hand the same color to a website, a phone, a poster, and a coffee cup, and every one of them reproduces it faithfully. Each model is built around how its medium actually creates color. Screens make color with light. Printers make it with ink. Because those two processes are opposites, they need different recipes, and that single fact explains most of what follows. ## RGB: Mixing Light On A Screen Every pixel on your display is three tiny lamps sitting side by side, one red, one green, one blue. RGB describes a color by how brightly each of those three lamps shines, on a scale from 0 to 255. Zero means the lamp is off. 255 means it is at full strength. This is additive color, because you start in darkness and add light to build toward white. Turn everything off and you get black, written rgb(0, 0, 0). Turn all three to full and the light combines into white, rgb(255, 255, 255). Push only the red lamp and you get pure red, rgb(255, 0, 0). Red and green together with no blue make yellow, rgb(255, 255, 0), which surprises people the first time, because mixing light follows different rules than mixing paint. A soft, friendly brand blue might land at rgb(84, 158, 255): plenty of blue, a healthy amount of green, and a little red to keep it from feeling cold. Because there are 256 possible levels for each of the three channels, RGB can describe a little over sixteen million colors. That is the full range your screen can show, and it is far more than the eye can comfortably tell apart. ## HEX: The Same Color In Base Sixteen HEX is not a different color system. It is RGB wearing a shorter coat. Instead of three numbers from 0 to 255, a hex code writes those same three values in base sixteen, the counting system that runs 0 through 9 and then A through F, where F stands for fifteen. Each channel becomes exactly two characters, so the whole color fits into six characters behind a single hash. Read a hex code in pairs and it falls apart cleanly. In #549EFF, the 54 is red, the 9E is green, and the FF is blue. FF is the largest two character value, so it means 255, the same full blue you saw in the RGB version. That is why #549EFF and rgb(84, 158, 255) are the identical color written two ways. The classics are worth memorizing: #FFFFFF is white, #000000 is black, #FF0000 is pure red. Designers and developers lean on hex constantly because it is compact, it copies and pastes without fuss, and it is the native way to name a color in web styling. ## CMYK: Mixing Ink On Paper Print works the other way around. A blank page is already white and reflects all light back at you, so a printer cannot add light. It can only subtract it by laying down ink. CMYK describes a color as four ink amounts, measured in percentages from 0 to 100: Cyan, Magenta, Yellow, and Key, which is the printer's name for black. This is subtractive color. Each layer of ink absorbs some of the light bouncing off the page and sends less back to your eye. Lay down nothing and the paper stays white, cmyk(0%, 0%, 0%, 0%). In theory cyan, magenta, and yellow together would make black, but in practice they muddy into a tired brown, so a dedicated black ink does that job far more cleanly and cheaply, which is why the K channel exists. Notice what happens to our brand blue on paper: rgb(84, 158, 255) becomes roughly cmyk(67%, 38%, 0%, 0%), a heavy dose of cyan, some magenta, and no yellow at all. The harder truth is that print simply cannot reproduce every color a screen can. The brightest, most saturated screen blues and greens sit outside the range ink can mix, so they shift to the nearest printable neighbor. That is why a color can glow on your monitor and arrive a little flatter on a flyer. Knowing this in advance saves a lot of disappointment at the print shop. Now that you have seen all three notations, try moving between them yourself. Pick a color or type a hex code and watch its RGB and CMYK equivalents update together. ## Choosing The Right Model The rule is short. If your work lives on a screen, think in RGB and write it as HEX. If it is going to be printed with ink, think in CMYK and check your colors before you send the file. They are three views of the same idea, and once you can move between them without hesitating, color stops feeling like guesswork and starts feeling like a language you can actually speak. If you want to keep exploring, our [color tool](https://codigrate.com/tools/color) can take any hex, RGB, or CMYK value and show you its full breakdown, including the exact conversions above and a lot more, so you can build the instinct one color at a time. ## Frequently Asked Questions ### What is the difference between RGB and HEX? There is none in the color itself. HEX is just RGB written in base sixteen: the same three values from 0 to 255, packed into six characters behind a hash. #549EFF and rgb(84, 158, 255) are the exact same color in two notations, and HEX is popular because it is compact and copies cleanly into web styling. ### Why do screen colors look different when printed? Screens make color by adding light (RGB) while print makes it by subtracting light with ink (CMYK). The two processes are opposites, and ink cannot mix the brightest, most saturated blues and greens a screen can glow, so those colors shift to the nearest printable neighbor and arrive a little flatter on paper. ### What does the K in CMYK stand for? Key, the printer's name for black. In theory cyan, magenta and yellow together would make black, but in practice they muddy into a tired brown, so a dedicated black ink does that job more cleanly and cheaply. That is the K channel. ### How many colors can RGB describe? A little over sixteen million. Each of the three channels has 256 possible levels from 0 to 255, and 256 to the power of three is roughly 16.7 million, far more than the eye can comfortably tell apart.