Skip to content

Commit

Permalink
Updates, start of editing model
Browse files Browse the repository at this point in the history
  • Loading branch information
mcstone committed Oct 15, 2024
1 parent cff3e79 commit 19765b7
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 5 deletions.
6 changes: 3 additions & 3 deletions apps/docs/docs/color-models.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
layout: doc
---

# Color and Color Models
Models for color can be found in art, science, design and engineering. The color models in the Color Buddy come from the domain of digital color and its application. The color models in the Color Buddy are all implemented using [colorjs.io](https://colorjs.io/docs/spaces), which offers a comprehensive set of models for specifying color, which they call "color spaces." The next section offers a brief overview of the color science underlying these models, followed by some additional detail about the [specific color models](#color-buddy) offered in the Color Buddy.
# Color Models and Spaces
Models for color can be found in art, science, design and engineering. The color models in the Color Buddy come from the domain of digital color and its application. The term "color space" is used for models that define 3D cartesian or polar coordinate system (not all do). The color models in the Color Buddy are all implemented using [colorjs.io](https://colorjs.io/docs/spaces), which offers a comprehensive set of models for specifying color. The next section offers a brief overview of the color science underlying these models, followed by some additional detail about the [specific color models](#color-buddy) offered in the Color Buddy.

## Background and terminology
Digital color models start with the technology of color displays, then procede to connect color technology to color vision.
Expand All @@ -27,7 +27,7 @@ Color appearance models are not simple uniform color spaces, though some are des
## Color Buddy
These are the current color spaces offered in the Color Buddy. We would appreciate feedback on their effectiveness, and which others might be useful.
### Perceptually Uniform
The Color Buddy offers the two CIELAB color spaces as its default editing space, LAB and LCH, which produce equivalent color values. That is, they are two views of the same color space, therefore colors appear in the same locations in the visualization. Interpolated values, however, will be different. The CIELAB spaces are recommended because they are an established standard with good perceptual uniformity (excellent for L*, less so for highly saturated colors). In Color Buddy, the profile for LAB and LCH is sRGB, to match the CSS implementation.
The Color Buddy offers the two CIELAB color spaces as its default editing space, LAB and LCH, which produce equivalent color values. That is, they are two views of the same color space, therefore colors appear in the same locations in the visualization. Interpolated values, however, will be different. The CIELAB spaces are recommended because they are an established standard with good perceptual uniformity (excellent for L*, less so for highly saturated colors). The current implementation uses a white point of D50, which is more common for print than for display applications but is the standard specification for CIELAB and is the only form that color.js supports in both LAB and LCH formulations.

In addition, Color Buddy offers OKLCH, which is provided in CSS to support a wider gamut than its implementation of LCH. The default profile for OKLCH is Display-P3, which better matches newer displays like the Apple wide gamut displays. [blog](https://blog.logrocket.com/oklch-css-consistent-accessible-color-palettes/) There is a corresponding OKLAB, which may be added at a later date
### RGB Based
Expand Down
19 changes: 18 additions & 1 deletion apps/docs/docs/editing-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,22 @@ layout: doc
---

# Editing model
The Color Buddy has been designed to facilitation the creation of excellent color palettes that meet concrete design guidelines with respect to usability, accessibility and design practice. The best way get an overview of the different editing functions provided by Color Buddy is to use the Tour, which is available from the Help menu (? icon in the upper right corner of black header bar). It identifies the Edit Plane, its associated Controls and Simulations, the Colors Panel, the Top Controls, Examples, Comparison and Evaluation sections of the UX. This document describes how these pieces fit together.

## Colors and Palettes
A color is a point in a color space. It has a value, a system assigned name and optional tags. All the colors in a palette are displayed together in the Edit Plane, whose axes are defined by the selected color space. In most cases, the 2D graph displays hue and chroma, lightness is shown on the vertical scale on the right. To edit a color (or colors) select and drag them to position them within the color space. Or, apply the editing controls, which will appear once a color or colors are selected. The simplest specification of a color is a RGB hex value. These are displayed as a list in the Editing controls, which can be copied and edited.

A color palette is an ordered list of colors. It has a name, type and optional tags. Palettes are automatically evaluated using the tests listed in the Evaluation. All the colors in a palette are displayed in the Colors Panel, which lists each color, its name, its hex value and optionally Metrics (distance, contrast) and icons that identify issues identified by the Evaluation guidelines. Color Buddy supports editing a single palette at a time. Any palette created or modified by a user is automatically stored in the Palettes manager.

## Comparing Palettes
Comparing different palettes, especially different variations of the same palette, is an import part of palette design. To support comparing palettes, the Palettes Manager offers a thumbnail view of each palette, whose style can be modified to include specific examples as well as a simple set of disks, for more nuanced comparison.

The Comparison view provides a way to see two palettes side-by-side in the same view as used for editing, which is a visualization of the colors in a specified color space. These visualizations illustrate important differences in color relationships within palettes. The most useful comparisons are two different palettes in the same space, or the same palette in two different spaces.

## Evaluating Palettes
Samples and Algorithms





Color Buddy is designed for editing color palettes, which are collections of color values.
2 changes: 1 addition & 1 deletion apps/docs/docs/motivation.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The Color Buddy is the result of a collaboration between Andrew McNutt and Maure
## Background
The design of the Color Buddy has its roots in a color palette design tool created by Maureen at Tableau for her work designing the Tableau Palettes, which allowed the simulataneous editing of all the colors in the palette, visualized in the device-independent CIELAB colorspace. In addition, it displayed the colors on a set of swatches, chosen to mimic typical Tableau marks. It provided interpolation tools for generating sequential palettes plus a very basic form of palette management, along with some additional convenience features.

Color Buddy offers the same basic editing and palette visualization model, much enhanced in a web-based implementation to include direct manipulation and other graphical editing tools operations like rotate and align. It supports a selection of different color models for editing, plus a library of visual examples that can be customized by the user. It also offers the ability to compare two independent palette visualizations, either the same palette in different spaces or two different color palettes.
Color Buddy offers the same basic editing and palette visualization model, much enhanced in a web-based implementation to include direct manipulation and other graphical editing tools operations like rotate and align. It supports a selection of different color models for editing, plus a library of visual examples that can be customized by the user as well as the swatches. It also offers the ability to compare two independent palette visualizations, either the same palette in different spaces or two different color palettes.

The suite of evaluation algorithms grew out of Andrew's work in visualization linting. The Color Buddy advances this work by focusing specifically on palette design, then integrating the rules with the palette editor. The current set of rules are designed to match those commonly used by professional designers. The Color Buddy not only indicates problems, but offers algorithmic solutions. Integrating such a checker with a GUI for palette design is an interesting research problem that has been partially addressed in the current implementation. We hope to evolve this further in the future.

0 comments on commit 19765b7

Please sign in to comment.