Adding hex code to color selector in palette.

[lasyasr]

What's the problem?

Add a text box that will allow the user to add a specific hex code instead of finding the specific hue from the selectors. They would find this in the Color selector palette from the stage. This could be for customization for people who want to have a more personal experience with Wordplay. The users of Wordplay (students, and teachers showing a demo) would be the target audience. In the current design, there are preset colors you can choose, and there are sliders, however, there is no way to add a specific hex code.

What's the design idea?

@amyjko @joonpiter Hello, I have updated my design proposal based on comments from last week!

• I noticed that the ƒ icon would have speech bubbles and instruct the user on what they needed to do, so to indicate to the user if they are adding in the wrong code the design would include speech bubbles to instruct the user what they are typing in wrong. Bellow the first bubble would include what a HEX code is.
• If the user does end up writing in the wrong code then the color will default to the hex code of #000000 which is known as Black.
• This code would be the CSS RGB with 3 hex values.
• The text box where users would include an HEX code would already include # so the users would be able to just type in numbers!

• When it comes to personalization, the ability to change the colors for stage allows the user to have a personal experience using the platform, designing the ability to change the color and have preset will cater to the personalization aspect.
• If the color specifics of LCH are placed right next to the slider bars without context on how the user can interact with those numbers. The only way to change those numbers were to use the sliders and adjust it accordingly. In this design proposal I wanted to change that feature and add a box around the numbers and a cursor line to indicate that the user can type in any number based on how LCH color work, to let them add a color preset that they already know and have in mind.
• Lastly right next to the sliders and box would be an option to add a HEX code so that the program would calculate and translate it to LCH. https://atmos.style/color-converter/hex-to-lch, there are websites that allow this to be changed, so we would need to implement a method that allows for the conversion to happen on the backend. When the hex code is changed, the converted value for LCH would have to be reflected on the color sliders.

Design specification

Reporters can leave this blank. Designers should write a detailed, precise description of what is to be built. If images are necessary to convey this precisely, make sure to include image descriptions, so everyone can see what is in the image. Do not link to external documents; everything should be embedded here. Once the design is approved, we will remove the needs design tag and replace it with the buildable tag, signalling that it can be built.

[amyjko]

@lasyasr Let us know how we can help with this design work!

[amyjko]

While you're working on this, note that the primary color format we use is LCH. (See the documentation for the Color type). Including hex, or RGB, or other color formats, needs to be done carefully, since LCH is the preferred format. See more about LCH here:

https://atmos.style/blog/lch-color-space

[lasyasr]

@amyjko I have created a design idea for changing the look of the color palette on stage. The idea was to allow the users to personalize the text with a color of their choice, and people who see colors differently, usually have a preferred color code. It was not possible to type in a custom code for the color, and there was no way of seeing what the name for each preset color was. The first image shows what the current design looks like. The second image shows the updated design and changes to meet the needs of the user with accessibility in mind.

[amyjko]

Hi @lasyasr! It sounds like you're asking for design review, correct? If so, here are some points of feedback:

• Make sure all design proposals go in the issue body, not in a comment. (Per the design wiki). It's important that we keep it there, in the design specification section, so people don't have to scroll through all the comments to see the proposal.
• Can you explain what you mean by "personalize the text"? I didn't see that in your example anywhere, and don't know what text you're referring to.
• Preset colors in Wordplay don't yet have names. See #14 for details on that pending design. The challenge is localizing them in all other languages; we don't want English only color words.
• This issue is about hex colors, but I didn't see anything in your design that allows for entering colors has hex. I just see a percentage. The current color editor uses LCH (lightness, chroma, hue), and so any interface that allows for different color formats would need a way to translate them into LCH. What are you proposing those percentages to mean?

[amyjko]

Thanks for the update @lasyasr. As I understand it, you're proposing to add three text fields to allow LCH values to be edited textually, and one additional text field for hex colors. If I understand that correctly, I have a few questions:

• How will you handle invalid LCH values in the text fields? Wordplay has many conventions for showing errors in text fields. Will you use those? How will the interface explain why a value is invalid?
• What format for hex color values are you proposing? CSS RGB with 3 hex values (e.g., #RRGGBB), with 4 hex values an an alpha? (e.g., #RRGGBBAA)?
• What will the text field do with invalid hex color inputs? Show an error, resolve to some default color?
• Will the hex field require the # common in CSS, or permit six hex digits without it?
• The label on the hex text field has some problems. First, we don't use the acronym LCH anywhere in Wordplay; we use the labels "lightness", "chroma", and "hue", and translate those to other languages for other locales. Second, we should not assume that a 12 year old knows what "HEX" means. There needs to be some way of explaining the difference between a HEX RGB value (assuming that's what you're proposing), since youth don't know what hexdecimal numbers are, or what they have to do with color.

[joonpiter]

@lasyasr, I can't review it because you haven't included the design specification in the issue or the comments. Please add this, and I will review it.

[joonpiter]

HI @lasyasr thanks for clarifying where the design specification is at here my review with that context:

• Using speech bubbles to instruct users on errors in the HEX code input is a great idea, but the specific messages and their triggers must be more detailed. What exact conditions will prompt these messages and what they will specifically say is unclear.
• It’s specified that if users enter an incorrect HEX code, the color will default to #000000 (Black). However, it’s unclear if there will be a visual indication or message informing the user that their input was invalid and the color defaulted to black.
• You talk about allowing users to change colors and have presets, but your proposal lacks specifics on how users will create, save, and manage them. Are there limits on the number of presets? How are they stored and retrieved?

[lasyasr]

Overall this ticket was to support people who have a color preference with a hex code, something that is very familiar and popular when defining a color code. Still need to complete design that includes storing the color based off of what the user provided, and specifying certain interaction patterns. I will not continue to work on this issue.

[amyjko]

@lasyasr, can you clarify your role? Are you continuing work on this?

[lasyasr]

I just updated my earlier comment, I will not be working on this issue anymore.