海野味小屋

Creating a Color Scheme See Dynamic Color Scheme for a conceptual overview. Getting colors for theming To get color values for styling your UIs, the first step is to initialize DynamicScheme with the below parameters: A source color (formerly called seed color). It can be in ARGB format, sourceColorArgb, or HCT format, sourceColorHct. Scheme variant, variant. Whether the scheme is in light mode or dark mode, isDark. Contrast level, contrastLevel typed Double. The recommended levels are:...

从图像中提取颜色 有关概念性概述，请参阅颜色提取。 步骤 1 — 图像到像素 第一步是将图像转换为 ARGB 格式的像素数组。在此之前，请将其大小调整为 128 × 128 像素以便更快地处理。 MCU 不提供此功能，因此您必须依赖您编程语言中的惯用方法。例如，在 Java 中，可以使用 BufferedImage.getRGB 方法： 123456789101112import java.awt.image.BufferedImage;class ImageUtils { // ... public static int[] imageToPixels(BufferedImage image) { int width = image.getWidth(); int height = image.getHeight(); BufferedImage outputImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB); return image.g...

Refining Contrast In this guide, you will learn how to manually refine color contrast using the MCU contrast library. For optimal color contrast, we recommend using the DynamicColor and DynamicScheme features in your production. See Contrast for Accessibility for a conceptual overview. Calculating contrast ratio To measure the contrast of two colors, use the ratioOfTones method on the tones (L*) of the two colors. The tone of an HCT color is the tone component. The tone of an ARGB color can...

创建配色方案 有关概念性概述，请参阅动态配色方案。 获取用于主题化的颜色 要获取用于设置 UI 样式的颜色值，第一步是使用以下参数初始化 DynamicScheme： 源颜色（以前称为种子颜色）。 可以是 ARGB 格式的 sourceColorArgb，或 HCT 格式的 sourceColorHct。 方案变体 variant。 方案是浅色模式还是深色模式，isDark。 对比度级别 contrastLevel，类型为 Double。建议的级别是： 0.0 表示默认对比度。 0.5 表示较高对比度。 1.0 表示最高对比度。 -1.0 表示降低对比度。 色调调色板： primaryPalette secondaryPalette tertiaryPalette neutralPalette neutralVariantPalette errorPalette 我们提供了各种方案变体，例如 SchemeTonalSpot、SchemeContent 等，它们继承自 DynamicScheme 并带有预定义的色调调色板。这意味着您只需要指定源颜色、主题模...

Extracting colors from an image See Color Extraction for a conceptual overview. Step 1 — Image to Pixels The first step is to convert an image into an array of pixels in ARGB format. Prior to that, please resize it to 128 × 128 dimensions for faster processing. MCU does not provide this feature, so you’ll have to rely on the idiomatic method in your programming language. For example, in Java, one may use the BufferedImage.getRGB method: 123456789101112import java.awt.image.BufferedImage;cla...

优化对比度 在本指南中，您将学习如何使用 MCU 对比度库手动优化颜色对比度。为获得最佳颜色对比度，我们建议您在生产中使用 DynamicColor 和 DynamicScheme 功能。 有关概念性概述，请参阅辅助功能对比度。 计算对比度 要测量两种颜色的对比度，请对这两种颜色的色调 (L*) 使用 ratioOfTones 方法。 HCT 颜色的色调是 tone 分量。ARGB 颜色的色调可以通过 ColorUtils.lstarFromArgb 方法获得。 Dart 1final contrastRatio = Contrast.ratioOfTones(hct1.tone, hct2.tone); 123final tone1 = ColorUtils.lstarFromArgb(argb1);final tone2 = ColorUtils.lstarFromArgb(argb2);final contrastRatio = Contrast.ratioOfTones(tone1, tone2); Java 1double contrastRatio = Co...

Color Extraction Background From a wallpaper User-generated color comes from a user’s personal wallpaper. The wallpaper is digitally analyzed through a process called quantization, and a single color is selected as the source color. From in-app content Content-based color comes from in-app content, like an album thumbnail image, logo, or video preview. Like user-generated color, the image is digitally analyzed through quantization, and a single color selected as the source color. Extra...

Color terms Dynamic Color Dynamic Color represents a Material color role, and its value is determined by constraints in Dynamic Scheme. Material Color Roles Material color roles are like the “numbers” on a paint-by-number canvas. They are the connective tissue between elements of the UI and what color goes where. Roughly speaking, MCU assigns each color role with a value from a specific tonal palette. For example, the onSurface color uses a color from the Neutral Palette with tone 30 in li...

颜色术语 动态颜色 动态颜色代表一个 Material 颜色角色，其值由动态方案中的约束条件决定。 Material 颜色角色 Material 颜色角色 就像“数字填色”画布上的“数字”。它们是 UI 元素与颜色应用位置之间的连接组织。粗略地说，MCU 为每个颜色角色分配一个来自特定色调调色板的值。例如，onSurface 颜色在亮色方案中使用来自中性调色板的色调为 30 的颜色。 动态方案 动态方案由颜色属性组成，这些属性以预定的方式组合，以满足用户上下文或偏好的需求。它本质上是将颜色角色映射到色调调色板中特定色调的颜色。例如，primary = 207H 80C 90T，onPrimary = 207H 80C 40T。 方案变体 每个变体都是一组设计决策，涉及将色调调色板中的颜色值分配给颜色角色。 色调调色板 一组在 HCT 颜色空间中共享色相和色度，但在色调上有所不同的颜色。从感知的角度来看，我们可以说它们是“同一颜色的不同色调”。 MCU 生成 6 个色调调色板：主色、辅色、三次色、中性色、中性变体色和错误色。每个调色板包含从 0 到 100 的色调，作为...

无障碍对比度 对比度标准 谷歌无障碍评级 (GAR) 是一套确保数字产品对残障人士无障碍的指南。颜色对比度是 GAR 合规性的一个关键组成部分。 对于 Web 应用程序，这意味着要遵守 WCAG 的对比度建议。在旨在让所有用户（包括视障用户）都能轻松阅读内容的情况下，足够的对比度至关重要。这可以通过使用在文本和背景之间提供足够对比度的颜色来实现。 对比度 颜色对比度指的是色调或亮度的差异，而不考虑色相或色度。一个有助于理解具有良好对比度的用户界面的方法是，即使在灰度格式下，它仍然能正常工作。 对比度基于 CIEXYZ 颜色空间中的一个分量 Y，该分量测量亮度。Y 与 CIELab 中的 L* 存在一一对应的关系。给定两种颜色，其中较亮颜色的 Y 为 yL，较暗颜色的 Y 为 yD，对比度定义为： 1contrast_ratio = (yL + 5.0) / (yD + 5.0) 示例： 一种颜色与其自身的对比度为 1.0。 黑色和白色之间的对比度为 21.0。 对比度范围可以从 1 到 21（通常写作 1:1 到 21:1），可以想象一下白色背景上的黑色文本。 当我们说...