Title: colors – Make WordPress Design --- # Tag Archives: colors [ ](https://profiles.wordpress.org/noahrshrader/) [Noah Shrader](https://profiles.wordpress.org/noahrshrader/) 6:49 pm _on_ August 20, 2020 Tags: colors, [design ( 217 )](https://make.wordpress.org/design/tag/design/), [figma ( 5 )](https://make.wordpress.org/design/tag/figma/), hallwayhangout    # 󠀁[Designer Hallway Hangout – 8/20/2020](https://make.wordpress.org/design/2020/08/20/designer-hallway-hangout-8-20-2020/)󠁿 Below is a recording from today’s [Hallway Hangout](https://make.wordpress.org/community/2020/07/13/reimagining-online-events/#comment-28503) with some awesome folks from the community, hosted by Joen Asmussen and Noah Shrader. This was a casual, remote meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through [https://www.meetup.com/](https://www.meetup.com/). A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. where we shared ideas and demos of some current design efforts in flight. The topics of discussion were around the new _WordPress Design Library_, and some of the _color refresh work _being done to the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor. If you’re a contributor, or want to be a contributor to the design of WordPress, you might find the content helpful! Links referenced in the video: * [Figma WordPress Design Library](https://www.figma.com/file/e4tLacmlPuZV47l7901FEs/WordPress-Design-Library?node-id=0%3A1&viewport=736%2C447%2C1) * [GitHub colors SCSS](https://github.com/WordPress/gutenberg/blob/94d42311245f2a2e97bbb5086ceada0e1a467a83/packages/base-styles/_colors.scss) * [GitHub variables SCSS](https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss) You will need permission to view/edit the new [Figma WordPress Design Library](https://www.figma.com/file/e4tLacmlPuZV47l7901FEs/WordPress-Design-Library?node-id=0%3A1&viewport=736%2C447%2C1). To request access, pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of“ Ping me when the meeting starts.” the [#design](https://make.wordpress.org/design/tag/design/) channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform [https://slack.com/](https://slack.com/). The WordPress community has its own Slack Channel at [https://make.wordpress.org/chat/](https://make.wordpress.org/chat/) and someone will get you added in Figma. [#colors](https://make.wordpress.org/design/tag/colors/), [#figma](https://make.wordpress.org/design/tag/figma/), [#hallwayhangout](https://make.wordpress.org/design/tag/hallwayhangout/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2020/08/20/designer-hallway-hangout-8-20-2020/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2020/08/20/designer-hallway-hangout-8-20-2020/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2020/08/20/designer-hallway-hangout-8-20-2020/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2020/08/20/designer-hallway-hangout-8-20-2020/?share=facebook) * [ X ](https://make.wordpress.org/design/2020/08/20/designer-hallway-hangout-8-20-2020/?share=x) * [ Reddit ](https://make.wordpress.org/design/2020/08/20/designer-hallway-hangout-8-20-2020/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/colors/?subject=%5BShared%20Post%5D%20Designer%20Hallway%20Hangout%20-%208%2F20%2F2020&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2020%2F08%2F20%2Fdesigner-hallway-hangout-8-20-2020%2F&share=email) [ ](https://profiles.wordpress.org/drw158/) [Dave Whitley](https://profiles.wordpress.org/drw158/) 9:15 am _on_ November 26, 2019 Tags: colors, [style-guide ( 7 )](https://make.wordpress.org/design/tag/style-guide/) # 󠀁[Proposal: a new color palette for WordPress](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/)󠁿 Just like my previous posts on [type scale](https://make.wordpress.org/design/2019/10/11/proposal-a-consistent-type-scale-for-wordpress/) and [spacing](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/), a standardized approach to color enforces consistency and simplifies decision making for UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. design. It can also make it easier to adhere to [web accessibility guidelines](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#key-terms). This post aims to point out the opportunities we have today, propose a new color palette, and suggest how to implement it. [Continue reading →](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/#more-7429) [#colors](https://make.wordpress.org/design/tag/colors/), [#style-guide](https://make.wordpress.org/design/tag/style-guide/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/?share=facebook) * [ X ](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/?share=x) * [ Reddit ](https://make.wordpress.org/design/2019/11/26/proposal-a-new-color-palette-for-wordpress/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/colors/?subject=%5BShared%20Post%5D%20Proposal%3A%20a%20new%20color%20palette%20for%20WordPress&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F11%2F26%2Fproposal-a-new-color-palette-for-wordpress%2F&share=email) [ ](https://profiles.wordpress.org/hugobaeta/) [Hugo Baeta](https://profiles.wordpress.org/hugobaeta/) 7:59 pm _on_ April 5, 2015 Tags: 4.2, colors    # 󠀁[Default Admin Color Scheme Update](https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/)󠁿 Earlier in the 4.2 cycle, I opened a [ticket proposing changes to the default color scheme](https://core.trac.wordpress.org/ticket/31234) for wp-admin. After much consideration and a few changes, it is being brought into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. I’d like to explain the changes made, and the reason for them in this post! This started as part of an exercise to document the colors used by core for the [Design Handbook](https://make.wordpress.org/design/handbook) (work in progress). My instinct to iterate on the colors and try to make them more harmonious kicked in, and so I ran an experiment that resulted in this: [⌊color-changes-chart⌉⌊color-changes-chart⌉[ Here’s a breakdown of HEX color changes: | Grays | | Old | New | | #111111 | #191e23 | | #222222 | [#23282d](https://make.wordpress.org/design/tag/23282d/) | | #333333 | [#32373c](https://make.wordpress.org/design/tag/32373c/) | | #4b4b4b | #464b50 | | #888888 | [#82878c](https://make.wordpress.org/design/tag/82878c/) | | #aaaaaa | [#a0a5aa](https://make.wordpress.org/design/tag/a0a5aa/) | | #bbbbbb | [#b4b9be](https://make.wordpress.org/design/tag/b4b9be/) | | Blues | | Old | New | | #0074a2 | [#0073aa](https://make.wordpress.org/design/tag/0073aa/) | | #2ea2cc | [#00a0d2](https://make.wordpress.org/design/tag/00a0d2/) | | #45bbe6 | [#00b9eb](https://make.wordpress.org/design/tag/00b9eb/) | In essence, the grays were given a slight blue hue, and the for the blues I removed the red channel almost completely, for a purer blue. In both cases, I attempted to keep the value of the colors (lightness/darkness), so the change would be as seamless as possible, while giving the admin a new sense of refinement and identity. [@iammattthomas](https://profiles.wordpress.org/iammattthomas/) commented on the ticket, summarizing this change quite eloquently: > My subjective feeling is that the shift in colors is so slight, it doesn’t really > change the feeling we intended to convey with the original MP6 colors. If anything, > it makes the grays look more intentional, a color palette designed to work harmoniously > rather than pairing a signature shade of blue with a lot of neutral grays.   And here’s a side-by-side comparison of the old (left) and new (right) colors in use on the admin: [⌊color-wpadmin⌉⌊color-wpadmin⌉[ I believe this updated color scheme can still be iterated upon, specially regarding concerns of contrast and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia. org/wiki/Accessibility) (that weren’t addressed in this round, but are certainly a priority for the next release cycle). I’d love to hear your thoughts! [#4-2](https://make.wordpress.org/design/tag/4-2/), [#colors](https://make.wordpress.org/design/tag/colors/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/?share=facebook) * [ X ](https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/?share=x) * [ Reddit ](https://make.wordpress.org/design/2015/04/05/default-admin-color-scheme-update/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/colors/?subject=%5BShared%20Post%5D%20Default%20Admin%20Color%20Scheme%20Update&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2015%2F04%2F05%2Fdefault-admin-color-scheme-update%2F&share=email)